?

　　實際運用當中，總會碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風格。我們只需要把水平分組的“btn-group”類名換成“btn-group-vertical”即可。

<div class="btn-group-vertical"><button class="btn btn-default" type="button">首頁</button><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 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> </div><div class="btn-group-vertical"><button class="btn btn-default">首頁</button><button class="btn btn-default">公司介紹</button><div class="btn-group"><button class="btn btn-default" data-toggle="dropdown">聯系我們<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">蔬菜</a></li><li><a href="#">蔬菜</a></li><li><a href="#">蔬菜</a></li></ul></div> </div>

?

轉載于:https://www.cnblogs.com/qingyuan/p/4603390.html

總結

以上是生活随笔為你收集整理的Bootstrap系列 -- 32. 按钮垂直分组的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。