Bootstrap3布局--处理显示5列的方法

标签：bootstrap 5列 五列

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

通过相关资料的调查，列举两种方案（以一行五列举例）：

1. 修改 Bootstrap 源代码

2. 自定义五列的 CSS 类

修改bootstrap源代码

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

@grid-columns:            12;
@grid-gutter-width:       30px;
@grid-float-breakpoint:    768px;

通过修改变量 @grid-columns ，可以重新制定栅格系统的预定义列数，可以满足应用的特殊布局需求，但同时这种方法也有很大的不足：

1. 对应用程序中已有的布局代码会有严重的损害，原来使用以12列为基础的代码都要调整；

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

参考文档：

http://v3.bootcss.com/css/#grid-less

自定义五列的 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;
	}
}

本文出自 “Yan” 博客，请务必保留此出处http://jiaoyan.blog.51cto.com/8781601/1622251

Bootstrap3布局--处理显示5列的方法

标签：bootstrap 5列 五列

原文地址：http://jiaoyan.blog.51cto.com/8781601/1622251