默认情况下,Bootstrap不提供允许我们创建五列布局的网格系统,但正如您所看到的那样,它非常简单.
首先,您需要以Bootstrap的方式创建默认列定义.我打电话给我的班级col -..- 15.

.col-xs-15,.col-sm-15,.col-md-15,.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

接下来,您需要在不同媒体查询的情况下定义新类的宽度.

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

现在,您已准备好将类与原始Bootstrap类组合在一起.例如,如果你想创建div元素,它在中等屏幕上表现得像五列布局,而在较小的列上就像四列一样,你只需要使用这样的东西：

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>