Bootstrap系列 -- 32. 按鈕垂直分組

 

　　實際運用當中，總會碰到垂直顯示的效果。在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>