Twitter Bootstrap の topbar

CSS

Twitter Bootstrap という css フレームワークは管理画面やちょっとしたデモサイトで体裁を整えたいという場合にとても便利だと思う。
特に自分の場合デザインが良く分かってないのでこういうのは便利。
リリースのアナウンスが出た日に Github から css をダウンロードして作成中のに組み込んで使っていた。


最近 Github 上の css のバージョンが 1.2.0 にあがってるのを知った。
早速最新版にバージョンアップしたら、トップバーがコンテンツに被ってしまった。

こんな感じで、コンテンツが黒いバーの下に隠れてしまった。
# サンプルは examples/hero.html を一部改変。


もとのサンプルはなんで起きないのかと見てみたら、div class="hero-unit" の css に margin が設定されてるから起きない。
ということは container クラスに margin を設定してみたらいいのではと思いやってみた。

<div class="container" style="margin-top:60px;"> 
略
</div>

とかすれば行ける。
ただ、折角なので、外部 css にする事にした。


site.css

.container{margin-top:60px;}
.container-fluid{margin-top:60px;}

hero.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="../bootstrap-1.2.0.css" rel="stylesheet" />
    <link href="../site.css" rel="stylesheet" />
  </head>
</html>

不具合なのかどうか、分からないのでとりあえずこれで回避できた。


2011/09/13 追記
コメントで不具合じゃないと教えて頂いた。

Note: When using the topbar on any page, be sure to account for the overlap it causes by adding padding-top: 40px; to your body.

http://twitter.github.com/bootstrap/#navigation

って書いてあった orz


情報ありがとうございます！