3

Bootstrap 3 から始めて、慣れてきたところです。

Bootstrap 3 のドキュメントから navbar をコピーしました。必要な機能が正確にあり、なぜホイールを発明したのかという理由からです。

ヘッダーの後にジャンボトロンを配置したいのですが、全幅にしたいので、ドキュメントによるとコンテナのdivで囲みません。

問題は、コンテナ div を省略すると、ヘッダーの下にスライドして戻ることですが、ヘッダーが終了するところから開始したいということです。コンテナの中に入れると、その下にうまく収まります。

誰かが私が間違っている場所と、それを押し下げるハックdivを作成せずに修正する方法を教えてもらえますか? どうもありがとう。

これらの要素を横に伸ばしたくないので、ヘッダータグにコンテナーを保持したいと思います。

<!-- Docs master nav -->
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="../" class="navbar-brand"><img src="imagenes/logo.png" /></a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav navbar-right pull-down">
        <li class="">
          <a href="#">Menu</a>
        </li>
        <li class="">
          <a href="#">Galería</a>
        </li>
        <li class="">
          <a href="#">Calendario</a>
        </li>
        <li class="">
          <a href="#">BH Musicos / Talentos</a>
        </li>
        <li class="">
          <a href="#">Blog</a>
        </li>
        <li class="">
          <a href="#">Contacto</a>
        </li>
      </ul>
    </nav>
  </div>
</header>
<div class="jumbotron">
  <h1>Hello World</h1>
  <p>Testing one two three</p>
</div>
4

2 に答える 2

7

navbar docsの「Fixed to top」セクションを見ると、本文にパディングを追加するように促す警告があります。

ボディパディングが必要

paddingの上部に追加しない限り、固定ナビゲーション バーは他のコンテンツをオーバーレイします <body>。独自の値を試すか、以下のスニペットを使用してください。ヒント: デフォルトでは、ナビゲーション バーの高さは 50 ピクセルです。

body { padding-top: 70px; }

コア Bootstrap CSS の後に必ずこれを含めてください。

于 2013-09-04T16:05:05.410 に答える
0

ジャンボトロン内にコンテナーを追加すると、これも修正されます。

于 2014-10-19T11:58:05.730 に答える