bootstrap 页面分成三列_Bootstrap3布局--处理显示5列的方法

Bootstrap 的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。但在实际的需求中可能出现不能被12整除的列数时(比如一行平分为5列)，需要一些其他的方案解决。

通过相关资料的调查，列举两种方案(以一行五列举例)：修改 Bootstrap 源代码

自定义五列的 CSS 类

修改bootstrap源代码

根据官方文档，Bootstrap可以从 Less/Sass 源码编译而来，Bootstrap包含了一组 Less 变量和 mixin 用于帮你生成简单、语义化的布局。通过变量来定义列数、槽(gutter)宽、媒体查询阈值(用于确定合适让列浮动)。我们使用这些变量生成预定义的栅格类，如下所示：@grid-columns:            12;

@grid-gutter-width:       30px;

@grid-float-breakpoint:    768px;

通过修改变量 @grid-columns ，可以重新制定栅格系统的预定义列数，可以满足应用的特殊布局需求，但同时这种方法也有很大的不足：对应用程序中已有的布局代码会有严重的损害，原来使用以12列为基础的代码都要调整；

由于修改了默认的列值，程序员在编写代码时要格外注意，系统的兼容性和扩展性都存在很大挑战。

参考文档：

自定义五列的 CSS 类

这种方法相对简单的，自定义一套CSS类，尽量和Bootstrap风格保持一致。.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths {

position: relative;

min-height: 1px;

padding-right: 10px;

padding-left: 10px;

}

@media ( min-width : 768px) {

.col-sm-5ths {

width: 20%;

float: left;

}

}

@media ( min-width : 992px) {

.col-md-5ths {

width: 20%;

float: left;

}

}

@media ( min-width : 1200px) {

.col-lg-5ths {

width: 20%;

float: left;

}

}