css - Twitter Bootstrap 2.3.2 中是否有用于导航栏的下拉类？

Question

有 pull-right 和 pull-left 类来对齐 block 元素。我想知道是否有相应的 pull-top 和 pull-bottom 可用于导航栏？

<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) 对齐到导航栏的底部。

Answer 1

这个问题的答案实际上在于 CSS 的功能。 .pull-right 和 .pull-left 都应用了 micro-clearfix，然后在 Twitter Bootstrap 中将元素向左或向右浮动。

创建 .pull-top 和 .pull-bottom 类是不可行的，因为父元素需要有一个 position:relative 应用后，该元素将需要使用 top 和 bottom 属性进行人工处理，以使其正确放置。备选方案将要求元素具有固定高度，顶部应用负边距，高度的一半并应用 top:50%。同样，这需要父级为 position:relative。

与任何 CSS 框架一样，您必须自己做一些事情 :-(。