14

ドキュメントを読んで、自分のコードを Bootstrap の例と比較してきましたが、ブラウザ ウィンドウを小さくしたり、電話で表示したりすると、サイトのナビゲーション バーが約 100 ピクセル下がる理由がわかりません。

http://warm-ocean-8133.herokuapp.com/

これが私のhtmlで、ヒスイのテンプレート形式です。

.navbar.navbar-fixed-top
  .navbar-inner
    .container
      a.btn.btn-navbar(data-toggle="collapse",data-target=".nav-collapse")
        span.icon-bar
        span.icon-bar
        span.icon-bar
      a.brand(href='#home') Miles Matthias
      .nav-collapse
        ul.nav
          li.active
            a(href='#home') Home
          li
            a(href='#contact') Contact
4

2 に答える 2

47

ファイルを含めた後bodyに要素の上部パディングを定義したため、視覚的な異常が表示されます。これは、「レスポンシブ」スタイルがパディングをオーバーライドできないことを意味します。bootstrap-responsive.css

<link href="/stylesheets/bootstrap.css" rel="stylesheet">
<link href="/stylesheets/bootstrap-responsive.css" rel="stylesheet">
<!-- ... some stuff -->
<style type="text/css">body {padding-top: 60px;}</style>

ページが全幅で表示されたときにパディングを使用したい (メイン コンテンツが上部のナビゲーション バーの下に表示されないようにするため) が、ブラウザの幅を縮小するときに「レスポンシブ」スタイルでそのパディングをオーバーライドする必要がある(またはモバイル デバイスでページを表示します)。

したがって、修正は簡単です。とを含める間に、要素の上部パディングを定義しbodybootstrap.cssbootstrap-responsive.cssます。

Bootstrap サンプルは、開始するのに最適なテンプレートです。流動的なレイアウトサイトでは、次のようにします。

<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  .sidebar-nav {
    padding: 9px 0;
  }
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
于 2012-04-17T05:12:52.273 に答える
23

@mediaを使用して、本文のパディングをオーバーライドできます。このような：

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<style type="text/css">
  body {
    padding-top: 60px;
  }
  @media (max-width: 979px) {
    body {
      padding-top: 0;
    }
  }
</style>
于 2012-06-24T05:57:10.877 に答える