Bootstrap系列 -- 33. 等分按鈕

賀臣發表於2015-06-26

 

  等分按鈕也常被稱為是自適應分組按鈕,其實現方法也非常的簡單,只需要在按鈕組“btn-group”上追加一個“btn-group-justified”類名.

<div class="btn-wrap">
    <div class="btn-group btn-group-justified">
    <a class="btn btn-default" href="#">首頁</a>
    <a class="btn btn-default" href="#">產品展示</a>
    <a class="btn btn-default" href="#">案例分析</a>
    <a class="btn btn-default" href="#">聯絡我們</a>
  </div>
</div>

<div class="container-fluid">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1">

                <div class="btn-group btn-group-justified">
                    <a class="btn btn-default" href="#">首頁</a>
                    <a class="btn btn-default" href="#">產品展示</a>
                    <a class="btn btn-default" href="#">案例分析</a>
                    <a class="btn btn-default" href="#">聯絡我們</a>
                </div>


            </div>
        </div>
</div>

 

相關文章