web-dev-qa-db-ja.com

TwitterのnavbarのプルダウンクラスはありますかBootstrap 2.3.2？

ブロック要素を整列させるためのpull-rightおよびpull-leftクラスがあります。対応するpull-topおよびpull-bottomがnavbarで機能するかどうか疑問に思っていますか？

<header id="navbar" role="banner" class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <a class="logo pull-left" href="/" title="Home">
        <img src="logo.png" alt="Home">
      </a>

      <div class="nav-collapse collapse">
        <nav role="navigation">
          <ul class="menu nav">
            <li>...</li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>

目標は、メニュー（ul.nav）をナビゲーションバーの下部に配置します。

enter image description here

csstwitter-bootstraptwitter-bootstrap-2
13
Drake Guan

これに対する答えは、CSSの機能にあります。 .pull-rightと.pull-leftはどちらもマイクロクリアフィックスを適用してから、Twitter Bootstrapで要素を左また​​は右にフロートします。

親要素に.pull-topを適用する必要があるため、.pull-bottomおよびposition:relativeクラス 'を作成することはできません。その場合、要素は、topおよびbottomプロパティを使用して人が処理する必要があります。それは適切に配置されました。代替案では、要素の高さが固定され、上部に負のマージンが適用され、高さの半分でtop:50%が適用される必要があります。この場合も、親はposition:relativeである必要があります。

他のCSSフレームワークと同様に、自分でやらなければならないことがいくつかあります:-(。

14
David Barker