html设置按钮矩阵,HTML – 如何使用bootstrap 3制作漂亮的按钮矩阵？

一组按钮很少有伪类

>仅使用.btn-group类的一个块.

>使用伪类应用一组CSS属性：

>明确：左;属性强制按钮开始矩阵的新行.这是因为.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;

}

Button 1

Button 2

Button 3

Button 4

Button 5

Button 6

Button 7

Button 8

Button 9

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;

}