在實(shí)際運(yùn)用當(dāng)中，除了水平導(dǎo)航之外，還有垂直導(dǎo)航，就類似前面介紹的垂直排列按鈕一樣。制作垂直堆疊導(dǎo)航只需要在“nav-pills”的基礎(chǔ)上添加一個(gè)“nav-stacked”類名即可：

<ul class="nav nav-pills nav-stacked">
     <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li class="disabled"><a href="##">Responsive</a></li>
</ul>

運(yùn)行效果如下：

垂直堆疊導(dǎo)航與膠囊形導(dǎo)航相比，主要是讓導(dǎo)航項(xiàng)不浮動(dòng)，讓其垂直排列，然后給相鄰導(dǎo)航項(xiàng)留有一定的間距：

/*源碼請(qǐng)查閱bootstrap.css文件第3578行～第3584行*/

.nav-stacked > li {
  float: none;
}
.nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}

大家是否還記得，在下拉菜單一節(jié)中，下拉菜單組與組之間有一個(gè)分隔線。其實(shí)在垂直堆疊導(dǎo)航也具有這樣的效果，只需要添加在導(dǎo)航項(xiàng)之間添加“<li class=”nav-divider”></li>”即可：

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="##">Home</a></li>
    <li><a href="##">CSS3</a></li>
    <li><a href="##">Sass</a></li>
    <li><a href="##">jQuery</a></li>
   <li class="nav-divider"></li>
    <li class="disabled"><a href="##">Responsive</a></li>
</ul>

運(yùn)行效果如下：

實(shí)現(xiàn)樣式：

/*源碼請(qǐng)查閱bootstrap.css文件第3485行～3490行*/

.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}

或許你會(huì)問(wèn)，如果我在”nav-tabs”上添加“nav-stacked”是不是也能實(shí)現(xiàn)垂直的標(biāo)簽選項(xiàng)導(dǎo)航呢？答案是：在bootstrap V2.x版本可以，但在Bootstrap V3.x版本將這個(gè)效果取消了，可能作者覺(jué)得垂直選擇項(xiàng)并不太常見(jiàn)，也不美觀吧。