等分按鈕的效果在移動端上特別的實(shí)用。整個按鈕組寬度是容器的100%，而按鈕組里面的每個按鈕平分整個容器寬度。例如，如果你按鈕組里面有五個按鈕，那么每個按鈕是20%的寬度，如果有四個按鈕，那么每個按鈕是25%寬度，以此類推。

等分按鈕也常被稱為是自適應(yīng)分組按鈕，其實(shí)現(xiàn)方法也非常的簡單，只需要在按鈕組“btn-group”上追加一個“btn-group-justified”類名，如下所示：

<div class="btn-wrap">
<div class="btn-group btn-group-justified">
  <a class="btnbtn-default" href="#">首頁</a>
  <a class="btnbtn-default" href="#">產(chǎn)品展示</a>
  <a class="btnbtn-default" href="#">案例分析</a>
  <a class="btnbtn-default" href="#">聯(lián)系我們</a>
</div>
</div>

運(yùn)行效果如下：

實(shí)現(xiàn)原理非常簡單，把“btn-group-justified”模擬成表格（display:table），而且把里面的按鈕模擬成表格單元格（display:table-cell）。具體樣式代碼如下：

/*源碼請查看bootstrap.css文件第3277行～第3291行*/

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
  display: table-cell;
  float: none;
  width: 1%;
}
.btn-group-justified > .btn-group .btn {
  width: 100%;
}

特別聲明：在制作等分按鈕組時，請盡量使用<a>標(biāo)簽元素來制作按鈕，因?yàn)槭褂?lt;button>標(biāo)簽元素時，使用display:table在部分瀏覽器下支持并不友好。