4.3.6　自适应分组

.btn-group-justified样式提供了一个特殊的功能，就是在一个.btn-group容器上，如果使用了该样式，则所有的按钮都会100%充满容器元素，即容器元素宽高有多少，按钮的宽高就会变成多少，效果如图4-18所示。

图4-18　图4-18　自适应分组运行效果

<div class="btn-group btn-group-justified"><!--这回，又回到了附加样式的设计思想了-->
<a role="button" class="btn btn-default">左</a>
    <a role="button" class="btn btn-default">中</a>
    <a role="button" class="btn btn-default">右</a>
</div>

自适应分组的原理主要是利用了CSS的display: table和display: table-cell特性，这两个特性正如第一章CSS基础语法里讲的，主要是模拟实现table的功能，能够解决所有在使用绝对定位和浮动定位进行多列布局时所遇到的问题。

// 源码3286行
.btn-group-justified {
 display: table;                /* 应用CSS表格样式 */
 width: 100%;           /* 100%填充 */
 table-layout: fixed;/* 边框分开，也就是相邻的2个按钮间的线是双倍border像素粗线（即2像素） */
 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%;           /* 但在自适应分组内，按钮分组里的按钮100%显示 */
}

注意

该样式仅完美地支持a元素的按钮，因为有些浏览器对button元素的支持不太好（比如Firefox）。