bootstrap元素宽度_Bootstrap | 结合代码学习Bootstrap3 栅格系统

开篇的话：

大家可能会好奇，技术的滚轮滚滚向前，这个时候怎么还会有博文在介绍Bootstrap 3呢？

技术没有好坏之分，只有适合和不适合的区别，因为我们这个项目对IE有明确的要求，所以Bootstrap 3相对来说更适合，栅格系统又是我认为的Bootstrap的精髓，所以呢，我们就开始今天的博文吧～

简介

Bootstrap中的栅格系统就是通过一系列的行(row)与列(column)的组合创建页面布局。

要使用栅格系统，就要遵循以下规则：

1、数据行(.row)必须包含在容器.container或.container-fluid中

2、列(.column)必须放在数据行(.row)中

3、页面内容应当放置在列容器(.column)之内

4、列与列之间设置了15px的内距(padding)

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {  position: relative;  min-height: 1px;  padding-right: 15px;  padding-left: 15px;}

在Bootstrap 4中添加了一个槽宽(Gutters)的概念，可以用no-gutters类来添加一个无内边距的列

no-gutter实现代码如下：

.no-gutters {  margin-right: 0;  margin-left: 0;}.no-gutters > .col,.no-gutters > [class*="col-"] {  padding-right: 0;  padding-left: 0;}

把no-gutters添加到row上就可以创建一个没有边距的列了，当然以下代码同时也展示了一个8列的栅格系统：

栅格参数

Bootstrap 3 栅格参数把屏幕分成了四类(超小屏，小屏，中屏和大屏)，分界点为768px、992px和1220px

把小屏幕和超小屏幕分界点定在768px已经不满足现在的需求了，所以在bootstrap 4中进行了优化，增加了576px这一个档位。

假设我们以bootstrap4的分隔节点重构Bootstrap 3，那么我们只需要保持-xs-这一档位不变，加上576px这一段媒体查询

@media (min-width: 576px) {/*.col-sm-*{  加上小屏代码}*/}

以前我们-col-xs- 则要改成 -col-sm-

以前我们-col-sm- 则要改成 -col-md-

以前我们-col-md- 则要改成 -col-lg-

以前我们-col-lg- 则要改成 -col-xl-

也就是前缀依次向后挪一位就可以了，这样改造过后的bootstrap 3在不同分辨率上的表现会更加合理些。

列的实现原理(以Bootstrap3为例)

我们以.col-xs-*为例，其他的除了前缀不一样外，其原理都是完全一样的。

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {  float: left;}.col-xs-12 {  width: 100%;}.col-xs-11 {  width: 91.66666667%;}.col-xs-10 {  width: 83.33333333%;}.col-xs-9 {  width: 75%;}.col-xs-8 {  width: 66.66666667%;}.col-xs-7 {  width: 58.33333333%;}.col-xs-6 {  width: 50%;}.col-xs-5 {  width: 41.66666667%;}.col-xs-4 {  width: 33.33333333%;}.col-xs-3 {  width: 25%;}.col-xs-2 {  width: 16.66666667%;}.col-xs-1 {  width: 8.33333333%;}

1、column采用百分比布局，默认为12列

col-xs-12就占100%，11列就占11/12(91.66666667%)，10列就为5/6(83.33333333%)以此类推

2、所有的列都是左浮动

所以bootstrap用了以下代码清除浮动

.container-fluid:before,.container-fluid:after,.row:before,.row:after{display: table;content: " ";}.container:after,.container-fluid:after,.row:after{  clear: both;}

列偏移

有时候，我们不希望相邻的两个内容列之间有空隙，又或者我们想要某个列居中，这个时候就可以用到列偏移。

先看源码：

.col-xs-offset-12 {  margin-left: 100%;}.col-xs-offset-11 {  margin-left: 91.66666667%;}.col-xs-offset-10 {  margin-left: 83.33333333%;}.col-xs-offset-9 {  margin-left: 75%;}.col-xs-offset-8 {  margin-left: 66.66666667%;}.col-xs-offset-7 {  margin-left: 58.33333333%;}.col-xs-offset-6 {  margin-left: 50%;}.col-xs-offset-5 {  margin-left: 41.66666667%;}.col-xs-offset-4 {  margin-left: 33.33333333%;}.col-xs-offset-3 {  margin-left: 25%;}.col-xs-offset-2 {  margin-left: 16.66666667%;}.col-xs-offset-1 {  margin-left: 8.33333333%;}.col-xs-offset-0 {  margin-left: 0;}

翻看源码我们发现列偏移其实也不神奇，-col-*-offset就是运用margin-left把列往右移，相当于左侧补列。

比如说我们有个内容列在中等屏幕下占8列，并且居中，我们就可以用以下代码实现

内容

col-md-8保证了我们在中屏幕下内容列始终占屏幕66.7%,col-md-offset-2保证了我们在这个内容列始终有16.7%左边距，这样就保证内容列的居中。

ps：

使用了col-xs-offset-*在超小屏幕上偏移了列，要使用col-sm-offset-0(具体以你的代码为准)把列偏移回来，这样才可以在超小屏幕上实现偏移并且不会影响到更大的屏幕

pps:

还有个小细节很容易被忽略，在bootstrap中，默认设定了元素的现实方式为box-sizing: border-box，这样才能保证默认每个列上15px的边距在百分比下布局不出滚动条不换行。

* {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;}*:before, *:after{  -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;}

box-sizing

这里再花一分钟简单说下box-sizing，假如说页面上有一个id为box1的元素

#box1{width:200px;height:200px;border:8px solid red;padding:20px;box-sizing: border-box;}

box-sizing: border-box;

则元素实际宽高为144px,实际占用宽度为144 + 20 * 2 + 8 * 2，总宽度还是200px

box-sizing: content-box;

元素实际宽高为200px,实际占用的宽度为200 + 20 * 2 + 8 * 2 = 256px