1

ブートストラップ スケルトンのトップ ナビゲーションを次のように変更しました: http://jsfiddle.net/55dTU/

 <div class="navbar navbar-static-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>
      <a class="brand" href="/">SketchFemme</a>
      <div class="brand slogan">
        <span>pencial mileage</span><br>
        <span>one curve at a time</span>
      </div>
      <div class="container nav-collapse">
        <ul class="nav">
          <li><a href="/artists">Artists</a></li>
          <li><a href="/path2">Onion Skin</a></li>
          <li><a href="/path3">News</a></li>
          <li><a href="/path3">About</a></li>

        </ul>

        <ul class="nav" id="account_corner">

          <a href="/artists/homonolocus">homonolocus</a>
          <span class="divider">|</span>   
          <a href="/edit">Settings</a>
          <span class="divider">|</span>  
          <a href="/logout" data-method="delete" rel="nofollow">Sign out</a>

        </ul>

      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

Bootstrap .container は幅を 1170px に設定します。.container.nav-collapse div が .navbar-inner .container 内にネストされ、何らかの方法で .brand とスローガンが重なる理由を教えてください。.container のすべてのインスタンスは 1170px の幅であるため、.nav リンクはブランドやスローガンと同じ行ではなく、次の行に強制されると思います。

私の質問は、何かを修正する必要があるほどではありません。むしろ、これが機能する理由の説明を求めています。1 つの .container に、その上に同じ幅の別の .container を含めることができるのはなぜですか。それを可能にする position:absolute を探していましたが、見つかりません。ul.nav はどのようにしてインデントする場所を知るのでしょうか?... 左パディングも左マージンもなく、含まれる要素は navbar の幅全体に及びます。これがどのように達成されているか知りたいです。

4

2 に答える 2

0

私はあなたのフィドルを更新しました; 追加した

.navbar-static-top .container, 
.navbar-fixed-top .container, 
.navbar-fixed-bottom .container {

    width: 940px;

    height: 1px; /* These */
    clear:left;        
}

これにより、コンテナーは実際のブロックのように動作します。その表示はデフォルトでブロックに設定されていますが、高さが 0px であるため、ブロックのようには動作せず、インライン ブロックとして動作します。

またclear:left;、浮かんでいる競合をキャンセルします (何もboth考えずにフィドルを挿入しましたが、ここフランスでは午前 6 時 30 分です)。

于 2013-04-28T04:27:49.393 に答える