很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级
<div> <button type="button">首页</button> <button type="button">产品展示</button> <button type="button">案例分析</button> <button type="button">联系我们</button> <div> <button data-toggle="dropdown" type="button">关于我们 <span></span></button> <ul> <li><a href="##">公司简介</a></li> <li><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul> </div> </div>
垂直排列
默认地，按钮组都是水平显示的。但在实际运用当中，总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可
<div> <button type="button">首页</button> <button type="button">产品展示</button> <button type="button">案例分析</button> <button type="button">联系我们</button> <div> <button data-toggle="dropdown" type="button">关于我们<span></span></button> <ul> <li><a href="##">公司简介</a></li> <li><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul> </div> </div>
等分按钮
等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的100%，而按钮组里面的每个按钮平分整个容器宽度。例如，如果按钮组里面有五个按钮，那么每个按钮是20%的宽度，如果有四个按钮，那么每个按钮是25%宽度，以此类推
等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名
实现原理非常简单，把“btn-group-justified”模拟成表格（display:table），而且把里面的按钮模拟成表格单元格（display:table-cell）
[注意]在制作等分按钮组时，尽量使用<a>标签元素来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好
.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%; }
在上面的代码中，.btn-group-justified > .btn设置了table-cell，而table-cell是不能设置margin的，而代码中设置了-margin值，用来去除边框，显然不会生效。因此，去除重复边框的代码应该是合并表格边框—— border-collapse: collapse
<div> <a href="#">首页</a> <a href="#">产品展示</a> <a href="#">案例分析</a> <a href="#">联系我们</a> </div>
为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中。因为大部分的浏览器不能将CSS 应用到对齐的 <button> 元素上，但是，可以用按钮式下拉菜单来解决这个问题
<div> <div role="group"> <button >首页</button> </div> <div role="group"> <button >产品展示</button> </div> <div role="group"> <button >案例分析</button> </div> <div role="group"> <button >联系我们</button> </div> </div>
