13

ブロック要素を整列するためのpull-rightクラスとpull-leftクラスがあります。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) をナビゲーション バーの下部に揃えることです。

ここに画像の説明を入力

4

1 に答える 1

14

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

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

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

于 2013-09-05T16:53:09.227 に答える