2013-09-05 42 views
12

拉右左拉類對齊塊元素。我想知道是否有相應的頂部拉底可用於導航欄?Twitter Bootstrap 2.3.2中是否有導航欄的下拉類?

<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

回答

14

這個問題的答案真的在於CSS的能力。 .pull-right.pull-left都應用了micro-clearfix,然後在Twitter Bootstrap中將該元素向左或向右浮動。

.pull-top創建和.pull-bottom類是不可行作爲父元素將需要具有一個position:relative施加,該元件然後將需要人工處理與topbottom屬性周圍將它置於適當的。替代方案將要求元素具有固定的高度,並將頂部的負餘量應用於高度的一半,並應用top:50%。這又需要父母爲position:relative

與任何CSS框架,但都只是一些事情,你必須做你自己:-(。

+0

感謝這個詳細的解釋。然後,我應該谷歌一些手動CSS的方式做'拉down'對嗎?如果我可以使父元素'position:relative',我可以使用什麼樣的解決方案來創建自己的'pull-down'? – Drake

+1

在你的例子中,給容器和ul一個位置:relative。那麼需要使用'bottom'和'top'屬性,創建一個下拉類是不可能的,top和bottom的值將在每種情況下都會發生變化 –

+0

天哪,對引導2的答案進行了downvotes .x,接下來... –