前面看到的示例，按鈕組都是水平顯示的。但在實際運用當中，總會碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風格。我們只需要把水平分組的“btn-group”類名換成“btn-group-vertical”即可。如下所示：
<div class="btn-group-vertical">
<button class="btnbtn-default" type="button">首頁</button>
<button class="btnbtn-default" type="button">產品展示</button>
<button class="btnbtn-default" type="button">案例分析</button>
<button class="btnbtn-default" type="button">聯系我們</button>
<div class="btn-group">
<button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">關于我們<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">公司簡介</a></li>
<li><a href="##">企業文化</a></li>
<li><a href="##">組織結構</a></li>
<li><a href="##">客服服務</a></li>
</ul>
</div>
</div>
運行的效果如下：
實現垂直分組的樣式代碼：
/*請查看bootstrap.css文件第3234行～第3276行*/
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
和水平分組按鈕不一樣的是：
? 水平分組按鈕第一個按鈕左上角和左下角具有圓角以及最后一個按鈕右上角和右下角具有圓角
? 垂直分組按鈕第一個按鈕左上角和右上角具有圓角以及最后一個按鈕左下角和右下角具有圓角
我來試試：完成下面任務
編寫代碼實現垂直導航條效果，效果圖如下：
備注:這一小節沒有正確性驗證，請查看結果窗口與任務所給的結果圖片是否一致，從而判斷輸入代碼是否正確。
參考代碼：
<div class="btn-group-vertical">
<button class="btn btn-default" type="button">首頁</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">產品展示<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">收割機</a></li>
<li><a href="##">電動機</a></li>
<li><a href="##">拖拉機</a></li>
<li><a href="##">電動車</a></li>
</ul>
</div>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">聯系我們</button>
<button class="btn btn-default" type="button">關于我們</button>
</div>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報