（转载）Bootstrap 栅格系统的精妙之处

             读一些 Bootstrap 的源码，结合文档会发现一些不是很理解的地方：

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

CONTAINER

Container 有两个作用：

在随时可能的宽度变化(响应式)中提供宽度限制。当页面宽度变化，container 的宽度也随之变化。并且其中的 column 的宽度是基于百分比，所以他们的值不需要变化。

提供一个水平方向的 padding，使其内部的内容不会接触到浏览器的边界，大小为15px，就是图片中粉红色的部分，作用会在下面说。

注意，不需要也不应该在 container 中嵌套另一个 container。

ROW

Row 是 column 直接存在的容器，按照文档描述 row 中最多可有12个 column，不过可以通过 nesting 的方式灵活扩展。同时作为都是左浮动的 column 的 wrapper，自带 clearfix 的性质。

同时 row 还有一个很特殊的地方，就是左右各有 －15px 的 margin，就是图片中的蓝色部分。这样也就抵消了上面提到的 container 中15px的 padding，那么为什么要这么折腾呢？接着看往下读。

注意：千万记住要把 row 放到 container 的内部，这样才能保证正常。

COLUMN

注意啦，每个column 也会有15px的水平方向的 padding，也就是图片中黄色的部分，唉，先别急，会明白的。还记得上面提到的 row 的作用吗，colunmn 只能在 row 中生存，由于 row 的 margin 为－15px，那么位于两边的 column 就碰到了 container 的边界。但是 colunmn 本身又有 15px 的 padding 使得它其中的内容并不会碰到 container，同时 不同column的内容之间就有了30px的槽。结合图片看一下就一目了然了。

注意：一定要把 column 放到 row 里使用。

NESTING

当把上面一系列的 container, row, column 都设置好，就可以通过 nesting 扩展它的栅格系统了，也就是在 column 中直接嵌套 row，而不需要再套一层 container：



还记得 container 和 column 都有15px的 padding 吗，当 nesting 的时候 column 的作用也相当于 container 了，这样就可以实现任意的嵌套了。



=====================================================================================================================

像 CSS 栅格系统原理这类东西本应该藏在帘子后面，你直接用就可以了，没必要去了解其背后的工作原理，除非你有了比较烂的设计或者一些比较复杂的东西，

当你无法找出 spacing, margin, padding 等这些补白全都乱的原因，那就真的很苦逼了，尤其是在某些动态改变和变化的
UI 上。

在关于 bootstrap 的栅格系统工作原理上我见过很多人都对它比较困扰、懊恼，每次都需要我解释很多遍后别人才能理解，

所以我乐意用快速和可视化的方式来解释为什么 bootstrap 栅格系统能玩得动，没必要解释很多。让我们一起找出
Bootstrap 是如何利用巧妙的技巧实现栅格系统的

HTML正确的基本结构：

<div class="container">
<div class="row">
<div class="col-xs-12"></div>
</div>
</div>

Container

Container 这个容器 class 为 .container
类有 2 个目的

1 、在响应式宽度上提供宽度约束。响应式尺寸的改变其实改变的是 container ，行
(rows) 和列 (columns) 都是基于百分比的所以它们不需要做任何改变；

2 、提供 padding 以至于不内容不直为紧贴于浏览器边缘，两边都是
15px ，下图中粉色的就是了，稍后解释更多；

在一个container中永远不需要再嵌一个container，记住永远不要。

你将会看到为什么

Row

行 (Row)Class 为 .row 的容器

row 为 col 提供了空间，理想上一行上分了 12 col
，当所有 col 都向左浮时 row 也就扮演了容器角色，另外当浮
4000
动有问题时
row 也不会重叠

Rows  的两侧都拥有独特的负 15px margin 值 ,
如下图中蓝色部分 .  被当作为 row 的
div 被约束在 container 内边界与粉色区域重叠，但没超过。这负的
15px margin 值把 row 的推出了
container 的 15px padding ，并与之重叠，本质上讲就是负出去。为什么这么做呢？原因得看列
(col) 的工作原理，下面我们会看到

永远不要在 container 外用 row, row 在
container 外面使用是无效的

Column

列(col)现在有15px的padding了，如下图中黄颜色部分。Container的正padding值造成了15px的留空，row用负margin值反的延伸回去，

所以现在col的padding值与container的padding重叠了

永远不要在row外使用col,在row外使用col是无效的

Content Within a Column

列(col)的padding给内容提供了空白，使内容不会紧贴在浏览器边界上，列之间有了padding才不会互相紧贴在一起。

container/row/column整这么些事儿最终要达到的结果就体现在这里了，就是为了col的补白啊...

Nesting嵌套

当你设置了container,row,column后，你可以在column内再创建新的栅格系统。你在右侧的列(col)内添加新的行(row)时不需再嵌container了



为什么嵌套时不需要新的container了？

这个技巧在于列(col)扮演了container一样的角色，列也有15px的padding值，它一样允许行(row)的负margin值,它内部的列、内容间的补白等都一样能很好的工作了

Offsets 偏移

偏移的实现相当简单，仅仅是在列(col)的左侧加上了margin值，

唯一比较怪的地方可能是在最左侧的col是从-15px的row的margin值开始偏移的，中间的列的偏移则是直接从前一个列开始偏移，分割分离出补白。

除此之外，偏移就表现的像列(col)一样

Push and Pull 列的排序

(直译过来应该是“推和拉”但实际使用过程中更多的表现为互换位置进行排序)

让我们先从为什么需要对列进行排序说起：基于响应式布局，对布局进行翻转，尤其是对移动设备上对列进行重新排列，

对于 pc 桌面来说 push and pull 允许你打破
HTML 中 div 从上到下从左到右的固定布局

可能让人比较困惑的是 push pull 的实现是通过添加 position
而不是通过添加 margin 值实现。

Push 添加的是 left 值， pull
添加的是 right 值。当然在添加 left
或者 right 值之前它们的容器已经是相对定位了。



上图那么做就有问题，它会导致列重叠，而不像正常的列或者列偏移。

所以如果你 push 了一个列到右侧，它就会叠在右侧的列上，反之亦然。

所以一般我们总是“互换”，如果你 push 一个列到右侧，那么你得
pull 右侧的列到左侧，或则也对右侧的列进行处理。

The Reasoning Behind It 总结一下背后的原理

Container:

正是由于 container 这样设计才让 content 的两侧拥有
15px 的 padding 值的补白，

另外，整个 body 拥有 15px 的
padding 值，这使整体上不会紧贴浏览器的边缘，当然如果对于满屏设计并带有背景色的 div
就不好了 ..

Rows:

行(row)拥有负的margin值，并且值等于container的padding值，以至于边界与container得以重叠（相等）

，负的margin值叠在了padding上，这让row看起来没被container的padding所影响.为啥？自行脑补..

Columns：

列(col)又拥有15px 的padding，所以能真正让content拥有15px的补白,而又让列之间拥有了15px+15px的中间补白，

正是因为如此，这个栅格系统不需要像960排版（blueprint, 等）系统似的对第一列或最生一列进行特殊的处理。

现在不管怎样在列之间都拥有15px的空白了。

Nested Rows：

嵌套行的原理就像上面一样，只是它的重叠住了列的padding ，其实就把外面的列当作 container
了，

本质上列扮演了 container 的角色，所以嵌套行时你不再需要
container

Nested Columns:  

嵌套列没什么好讲的了，和上面一样

Offsets: 

偏移的本质就是分割空白间隔，通过增加空白间隔达到你想要的距离，非常的简单

Push/Pull:

Push 和 pull 用于主要用于变换左右列的位置，当你有一个特别的设计并且
offset 偏移用着不给力的时候，你可以用它们来改变位置

Common Problems

这里有些普遍会发生的 bug 值得注意，一些 bug 在
HTML 中很容易就能看出来 .

缺少 Container ： 第一个容易产生
bug 的地方是忘记添加 container 。没有
container 意味着没有 padding 与行 (row)
的负 margin 直相抵消，

意味着行会超出父元素。当元素处于浏览器边缘时，这是最普遍的造成奇怪的横向滚动的原因



缺少 row:

第二个普遍问题是少了 row, 这与缺少 container 产生的问题相反，
content 与浏览器 /viewport 的边缘拥有了
30px 的距离，

比正常值多了一倍。而且你的列浮动也会产生问题。由于缺少了外面 row 的包裹，浮动没有得到正常的清除，所以浮动就可能产生问题。

同样，当你试图嵌套栅格系统时，同样新嵌进去的 content 离左侧的边距达到了 45px



Container 内的元素再嵌 container: 在 container
内任意元素内再嵌 container 会导致很多问题，如双倍的 padding
值，空白间隔，怪异的横向滚动



偏移/push/pull:

当使用偏移或者排序 (push/pull), 偏移很简单不会出什么问题，
push/pull 却不同，如果你 push 太多，列会超出它的
container ，记住只是使用正常的值主不会有问题



这些就是在使用 bootstrap3.0 的基础栅格系统时时产生的问题，如果你在设计里有很多的嵌套碰到问题，

或你的响应式布局没按照你所希望的方式工作，先看看上面这几点，是不是这些问题产生的。

如果你修复了上面说的问题，基本上除了你自定义的布局外 bootstrap3.0 的布局问题基本上都能搞定了

That ’ s It

这就是 bootstrap3.0 的工作原理。它真的很聪明并提供了极好的解决方案。在这么多年使用栅格系统的经验中，

我个人觉得它是实现的最优雅的。虽然看到到这片文章写了这么多会可能觉得 bootstrap3.0
的栅格系统很复杂，

但如果不从整体详细的了解其内部的实现原理的话，在实际使用中，它确实是使用了简单的 CSS ，提供了我们一个好用的栅格系统。

========================================================

英文原文： http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
========================================================

转载来自：博客园(王二狗)willian12345@126.com