等分按鈕的效果在移動端上特別的實用。整個按鈕組寬度是容器的100%，而按鈕組里面的每個按鈕平分整個容器寬度。例如，如果你按鈕組里面有五個按鈕，那么每個按鈕是20%的寬度，如果有四個按鈕，那么每個按鈕是25%寬度，以此類推。
等分按鈕也常被稱為是自適應分組按鈕，其實現方法也非常的簡單，只需要在按鈕組“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="#">產品展示</a>
<a class="btnbtn-default" href="#">案例分析</a>
<a class="btnbtn-default" href="#">聯系我們</a>
</div>
</div>
運行效果如下：
實現原理非常簡單，把“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>標簽元素來制作按鈕，因為使用<button>標簽元素時，使用display:table在部分瀏覽器下支持并不友好。
我來試試：完成下面任務
編輯代碼實現“等分按鈕”，效果圖如下：
備注:這一小節沒有正確性驗證，請查看結果窗口與任務所給的結果圖片是否一致，從而判斷輸入代碼是否正確。
參考代碼如下：
<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>
<a class="btn btn-default" href="#">商務平臺</a>
<a class="btn btn-default" href="#">服務平臺</a>
</div>
</div>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報