我有类似的东西：
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="btn-group">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<button type="button" class="btn btn-default">Button 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Button 4</button>
<button type="button" class="btn btn-default">Button 5</button>
<button type="button" class="btn btn-default">Button 6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Button 7</button>
<button type="button" class="btn btn-default">Button 8</button>
<button type="button" class="btn btn-default">Button 9</button>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
我想有3×3按钮矩阵.还有一件事,左侧和右侧必须看起来像这个例子(直线)：
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">button</button>
<button type="button" class="btn btn-default">button</button>
<button type="button" class="btn btn-default">button</button>
</div>
</div>
解决方法
一组按钮很少有伪类
>仅使用.btn-group类的一个块.
>使用伪类应用一组CSS属性：
> :first-child
> :last-child
> :nth-child()
> :nth-last-child()
>明确：左;属性强制按钮开始矩阵的新行.这是因为.btn类有float：left;属性.
>以与bootstrap.css文件中描述的btn-group类类似的方式设置border-radius和margin属性.
3×3矩阵
请检查结果：
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/* The heart of the matter */
.btn-matrix > .btn:nth-child(3n+4) {
clear: left;
margin-left: 0;
}
.btn-matrix > .btn:nth-child(n+4) {
margin-top: -1px;
}
.btn-matrix > .btn:first-child {
border-bottom-left-radius: 0;
}
.btn-matrix > .btn:nth-child(3) {
border-top-right-radius: 4px !important;
}
.btn-matrix > .btn:nth-last-child(3) {
border-bottom-left-radius: 4px !important;
}
.btn-matrix > .btn:last-child {
border-top-right-radius: 0;
}
/* Decorations */
.btn-matrix {
margin: 20px;
}
<div class="btn-group btn-matrix"> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> <button type="button" class="btn btn-default">Button 3</button> <button type="button" class="btn btn-default">Button 4</button> <button type="button" class="btn btn-default">Button 5</button> <button type="button" class="btn btn-default">Button 6</button> <button type="button" class="btn btn-default">Button 7</button> <button type="button" class="btn btn-default">Button 8</button> <button type="button" class="btn btn-default">Button 9</button> </div>
X×Y矩阵
代码仅依赖于X：
.btn-matrix > .btn:nth-child(Xn+X+1) {
clear: left;
margin-left: 0;
}
.btn-matrix > .btn:nth-child(n+X+1) {
margin-top: -1px;
}
.btn-matrix > .btn:first-child {
border-bottom-left-radius: 0;
}
.btn-matrix > .btn:nth-child(X) {
border-top-right-radius: 4px !important;
}
.btn-matrix > .btn:nth-last-child(X) {
border-bottom-left-radius: 4px !important;
}
.btn-matrix > .btn:last-child {
border-top-right-radius: 0;
}
