把一系列的.btn按钮放入.btn-group中即可。。。
<div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>
.btn是有设置圆角的
.btn-group .btn 设置了 position: relative; float: left; 所以他们会很好的排列在一行里面。
我认为下面的代码就是TMD艺术：
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0; }
最后一个目前还不知道呢，除了第一个和最后一个元素的border-radius是0；
<div class="btn-toolbar" role="toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div> <div class="btn-group">...</div> </div>
.btn-group设置了position: relative; display: inline-block; 所以他们会很好的在一个btn-toolbar里面水平排列。但是他没有float所以里面的各个btn-group是有间隔的。
我们可以给.btn-group再追加btn-group-lg或者btn-group-sm或者btn-group-xs来控制这个按钮组的大小。。。
又有新鲜玩意儿了，dropdown-list里面最外层一个div的class是dropdown，其实也可以是一个btn-group，只不过有些圆角问题需要解决。
但是bootstrap又提供了一个.dropdown-toggle，他是用来修正上面这种情况的，也就是说解决一下圆角问题。
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
第一个子元素或者最后一个子元素意外的圆角都去掉。
dropdown-toggle的圆角不去掉。。。。
<div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div>
分列式的下拉列表：
<div class="btn-group"> <button class="btn btn-default">Left</button> <button class="btn btn-default">Middle</button> <div class="btn-group"> <button class="btn btn-default">Right dropdown</button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> //注意这里，这个东西在什么位置，点谁谁会触发下拉事件。。。 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div>
如果修改为：
<div class="btn-group dropup">
的话，就会形成一个向上的箭头，和一个向上的上拉列表（是不是很萌）
Bootstrap学习 按钮组,布布扣,bubuko.com
原文：http://www.cnblogs.com/voctrals/p/3755251.html