两端对齐排列的按钮组
让一组按钮拉长为相同的尺寸,填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。
关于边框的处理
由于对两端对齐的按钮组使用了特定的 HTML 和 CSS (即 display: table-cell),两个按钮之间的边框叠加在了一起。在普通的按钮组中,margin-left: -1px 用于将边框重叠,而没有删除任何一个按钮的边框。然而,margin 属性不支持 display: table-cell。因此,根据你对 Bootstrap 的定制,你可以删除或重新为按钮的边框设置颜色。
IE8和边框
Internet Explorer 8 不支持在两端对齐的按钮组中绘制边框,无论是 或 元素。为了照顾 IE8,把每个按钮放入另一个 .btn-group 中即可。
关于 元素
只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可。
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
<a href="javascript:void(0);" class="btn btn-default" role="button">Left</a>
<a href="javascript:void(0);" class="btn btn-default" role="button">Middle</a>
<a href="javascript:void(0);" class="btn btn-default" role="button">Right</a>
</div>