Twitter Bootstrap 3：如何獲得垂直導航欄？

Question

好像它是在v2.3.2類.nav-stacked

<ul class="nav nav-tabs nav-stacked"> 
    ... 
</ul> 

的形式支持有沒有辦法做到這一點在3.0.0版本？

Answer 1

bootstrap 3.0仍然包含一個nav-stacked-class。如果它mising在您的副本，只是get the latest version或添加到您的CSS文件：

.nav-stacked > li { 
    float: none; 
} 

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

Answer 2

默認nav類引導3具有垂直佈局（雖然沒有國界），也.nav-pills仍然支持堆疊式佈局，但如果你想在「老」瞧你永遠可以從以前版本的樣式添加到您的CSS（還有一個小補丁）：

.nav-stacked > li { 
    float: none; 
} 
.nav-stacked > li > a { 
    margin-right: 0; 
} 
.nav-tabs.nav-stacked { 
    border-bottom: 0; 
} 
/*Fix to remove space between li's*/ 
.nav-tabs.nav-stacked>li+li { 
    margin-top: 0; 
} 
.nav-tabs.nav-stacked > li > a { 
    border: 1px solid #ddd; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0; 
} 
.nav-tabs.nav-stacked > li:first-child > a { 
    -webkit-border-top-right-radius: 4px; 
    -moz-border-radius-topright: 4px; 
    border-top-right-radius: 4px; 
    -webkit-border-top-left-radius: 4px; 
    -moz-border-radius-topleft: 4px; 
    border-top-left-radius: 4px; 
} 
.nav-tabs.nav-stacked > li:last-child > a { 
    -webkit-border-bottom-right-radius: 4px; 
    -moz-border-radius-bottomright: 4px; 
    border-bottom-right-radius: 4px; 
    -webkit-border-bottom-left-radius: 4px; 
    -moz-border-radius-bottomleft: 4px; 
    border-bottom-left-radius: 4px; 
} 
.nav-tabs.nav-stacked > li > a:hover, 
.nav-tabs.nav-stacked > li > a:focus { 
    border-color: #ddd; 
    z-index: 2; 
}