<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> .btn-group-vertical > .btn, .btn-group-vertical > .btn-group, .btn-group-vertical > .btn-group > .btn { display: block; float: none; width: 100%; max-width: 100%; } .btn-group-vertical > .btn-group > .btn { float: none; } .btn-group-vertical > .btn + .btn, .btn-group-vertical > .btn + .btn-group, .btn-group-vertical > .btn-group + .btn, .btn-group-vertical > .btn-group + .btn-group { margin-top: -1px; margin-left: 0; } .btn-group-vertical > .btn:not(:first-child):not(:last-child) { border-radius: 0; } .btn-group-vertical > .btn:first-child:not(:last-child) { border-top-right-radius: 4px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .btn-group-vertical > .btn:last-child:not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 4px; } .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } .btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { border-top-left-radius: 0; border-top-right-radius: 0; }
等分按钮又称为自适应分组按钮：
整个按钮组的宽度是容器的100%，而按钮组里面的每个按钮平分整个容器的宽度，例如一个按钮组里有五个按钮，每个按钮是容器宽度的20%；一个按钮组里有四个按钮，每个按钮是容器宽度的25%；
实现方法：只需要在按钮组.btn-group 上追加一个类名.btn-group-justified
<div> <buttton type="button">首页</buttton> <buttton type="button">案例分析</buttton> <buttton type="button">联系我们</buttton> <buttton type="button">关于我们</buttton> </div> .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模拟成表格（display：table），并且把里面的按钮模板模拟成表格单元格（display：table-cell）。
注意：在制作等分按钮组时，尽量使用<a>标签来制作按钮，因为使用button标签元素时，使用display：table在部分浏览器下支持并不友好