☰

上部のナビゲーションバーがページの上部のコンテンツをブロックしています 質問する

tag-icon • tag-icon css twitter-bootstrap
上部のナビゲーションバーがページの上部のコンテンツをブロックしています 質問する

Twitter Bootstrapコードがあります

  <div class='navbar navbar-fixed-top'>
    <div class='navbar-inner'>
      <div class='container'>
        <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </a>
        <div class='nav-collapse'>
          <ul class='nav'>
            <li class='active'>
              <a href='some_url'>My Home</a>
            </li>
            <li>
              <a href='some_url'>Option 1 </a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

しかし、ページの先頭を表示しているとき、ナビゲーション バーがページの上部近くにあるコンテンツの一部をブロックしています。ページの上部を表示しているときに、コンテンツがナビゲーション バーによってブロックされないように、残りのコンテンツを下に押し下げる方法について何かアイデアはありますか?

ベストアンサー1

レスポンシブ ブートストラップを使用している場合、このようにパディングを追加するだけでは不十分です。この場合、ウィンドウのサイズを変更すると、ページの上部とナビゲーション バーの間に隙間ができてしまいます。適切な解決策は次のようになります。

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

おすすめ記事