栅格系统
虽然原先一直用bootstrap3，但是也只是表面上了解的使用。随着现代浏览器的普及，以及大型应用页面的交互功能和需求越来越复杂，清楚的了解bootstrap的工作原理十分有必要。
弹性盒子系统的出现，使的前端人员纷纷趋之若鹜。他是那么的简洁与快速。然后出现了bootstrap4以及bulma这样的css项目，极大的方便了页面布局和样式。
今此，从网上查阅相关信息，没查到专门的中文版本，即使官网也只是部分翻译。于是专门翻译了bootstrap4的栅格系统部分，供自己学习查阅之用，也分享与有需要的人。（输入法问题错别字难免）
点击查看原文
得益于12列的系统，五个默认的自适应等级，sass的变量和mixins，以及一些列预定义的classes，加上强大的移动优先的弹性盒子栅格，来创建所有形状和尺寸的布局。
如何工作（实现）
bootstrap栅格系统使用一系列的的containers，rows以及columns来呈现内容以及设置内容的边距。它基于弹性盒子并且完全是自适应的。下面是一个可以说明他们是如何组织的比较深入的例子。
One of three columns
One of three columns
One of three columns
上述例子使用我们的预定义类可以在small,medium,large,extra large设备上创建三个宽度相等的columns。（注：我们当然可以设置不同的界点——breakpoint，但是这个例子使用的sm，所以凡是大于sm的界点都可以实现宽度相等的效果。）这些columns在父级的.container中间。
细拆一下，看它是如何工作的。
- 容器的作用是居中和水平话你的网站内容。请使用
.container来自适应物理的像素宽度，或者.container-fluid的width:00%到所有的宽度的硬件。 - Rows用来包裹columns。每个column都有水平的
padding（乘坐槽——gutter），用来控制他们之间的距离。这个水平padding抵消了row的负margins。这样一来，所有的columns中的内容看起来在左边是有距离的。 - 在栅格系统中所有的内容必须在columns中，并且columns必须是row的直系子孙。
- 得益于弹性盒子，栅格系统的columns在没有指定宽度的情况下会自动均分宽度。例如，例子中的
.col-sm将会在breakpoint在什么sm已经更高时宽度为25%。 - column使用每行12列中的数字做一个符号。如果你想使三个列宽度相等，你可以使用
.col-4。 - columns的宽度使用的是百分比，因此他们永远是流动的并且相对于父级取值。
- 每个column都有自己的水平方向的
.padding，但是，你可以使用在row中使用.no-gutters来去除row的margin，以及其下columns的padding。 - 为了使栅格系统能够自适应，bootstrap提供了五个界点——breakpoints。他们是:xs(适应所有的),sm,md,lg,xlg。
- 栅格系统的界点的媒体查询基于屏幕的最小宽度值。其效果是应用于当前的breakpoint或者高于他的宽度。（例如，
.col-sm-4会应用于small，medium，large以及extra large的设备。但是不适用xs的breakpoint）。 - 你可以使用预定义的栅格class（例如
.col-4）或者sass mixins来设置更多类。
要留意使用弹性盒子的限制和bugs，比如哪些不能使用弹性盒子的html元素。
栅格设置 Grid options
boostrap使用em或者来时定义大多数的尺寸，px用来定义栅格系统breakpoint或者容器的宽度。这是为视口的宽度是基于px并且不会随font size变化。
通过下面表格看下bootstrap栅格系统在各个方面是如何工作的。
自动布局列 Auto-layout columns
使用特殊的组合columns类可以很容易设置column的尺寸而不用明确的设置column的宽度的数字，例如.col-sm-6。
同等宽度
例如这里有两个栅格布局，用来适应从xs到xl的设备或者视口。你需要每个缺少数字的界点（breakpoint）组合类的列column都将是一样的宽度。
1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
宽度相等的column可以断为多行，但是这里又一个safari弹性盒子bug，该bug在没有明确flex-basis或者border的情况下会组织这种效果的实现。这个bug只存在于叫老旧的浏览器版本中，如果你升级到高一点的版本，那么完全不用担心。
设置一个列的宽度 Setting one column width
自动适应宽度auto-layout的弹性盒子栅格系统也意味着你可以设置其中一个column的宽度，并且他的相邻的columns将会自动调整自己的宽度。你也可以使用预定义的栅格类，混合栅格，或者直接设置元素的宽度。然而其他的columns永远都会自动调整自己的宽度，无论中间的column宽度为多少。
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
根据内容可变的宽度 Variable widht content
通过使用col-{breakpoint}-auto类来设设置column的宽度为其内容的宽度。
1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3
多行宽度相等 Equal-width mutil-row
在你想要断开列column的地方插入一个.w-100，你将获得列宽想的多行效果。
如果想要断开的地方能够实现自适应的效果，你需要掺入一些自适应的组合类。
col
col
col
col
自适应类 Responsive classes
bootstrap栅格系统包括五个预定义的等级来建立复杂的自适应布局。定制的列的尺寸用来适应xs、sm、md、lg、xl这样的设备。
所有的断点（breakpoints）
如果想要从xs到xl都是一样的效果可以使用.col和.col-*类。
如果你需要一个特别的尺寸，你可以给类添加一个数值；此外，可以随意的使用.col。
col
col
col
col
col-8
col-4
水平堆放 Stacked to horizontal
使用一组.col-sm-*类你可创建一个在sm断点（breakpoint）之前一直是水平堆放的基本栅格系统。
（注：水平堆放，即水平方向一个挨着一个，如果大于行宽则自动换行。）
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
混合和匹配
混合：不同的断点混合。匹配：当设备不同时，匹配不同的断点效果。
不想让你的columns在一些栅格下只是简单的堆放。那就使用在不同等级断电下显示不同效果的断点类的组合吧。看下面的例子，一个显示效果更好的方法。
.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
对齐 Alignment
使用弹性盒子方式来对列进行水平和垂直防线的对齐设置。
垂直对齐 Vertical alignment
- align-items-start
- align-items-center
- align-items-end
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
- align-self-start
- align-self-center
- align-self-end
One of three columns
One of three columns
One of three columns
水平对齐 Horizontal alignment
- justify-content-start
- justify-content-center
- justify-content-end
- justify-content-around
- justify-content-between
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
无间隙 No gutters
列columns之间的间隙是通过栅格系统的类来定义的，可以通过使用.no-gutters来移除。移除的包括.row的负的margins以及其直系子columns的水平的padding。
下面是创建这些样式的源码。注意：列column的覆盖只是在直系子级，并且通过属性选择的范围内。如果定义了更详细的选择器，你仍然可以通过一些控件组合（spacing utilities）来再定义column的padding。
需要一个边缘相挨着的设计?你可以去掉父级的.container或者.container-fluid。
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}看看实际上他们的代码样子。注意：你可以继续用这个和所有其他的预先定义的栅格类一块使用。
（包括columns的宽度，自适应等级，reorder，更多）
.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
列的包裹 columns wrapping
如果超过12columns被放在一个单独的row中，那么超过的columns将被作为一个单元，然后换行为新的一行。
.col-9
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.
列的折断 columns breaks
断开columns到一个新的一行需要一点小技巧：添加一个宽度为width:100%的元素到你想要断开的地方局。正常情况下这会变成一个多行效果，但是这个不是实现这个效果的最终方法。
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
你也可以使用这种在某个界点断块columns的方法。
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
重新排序 Reordering
排序类 order classes
使用.order-类来控制你的内容的视觉顺序。这些类也是可以自适应的，所以你可以通过breakpoint设置order（例如，.order-1.order-md-2)。支持从1到12的所有的栅格层级断点。
First, but unordered
Second, but last
Third, but first
这里也有自适应的.order-first和.order-last类，通过设置样式order:-1以及order:13(order:$columns+1)来自适应。这些类也可以在内部添加宽度数字来达到想要的效果。
位移列 Offsetting columns
你可以通过两种方法来位移列。我们的自适应.offset-栅格类以及margin组合。栅格类是对应的列的宽度，然而margin可以在宽度更灵活的时候快速布局。
位移类
向右位移使用.offset-md-*类。这些类会以column宽度为单位增加右边的margin为*个。例如，.offset-md-4会向右位移4个column宽度的位置。
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
除了在某些界点column的清除之外，你也许需要重新设置位移，看下面的例子。
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
与margin配合 Margin utilities
随着v4转移到了弹性盒子，你可以使用margin组合类，例如.mr-auto去强制相邻column彼此分开。
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto
嵌套 Nesting
为了使用默认的栅格系统嵌套组合你的内容。你可在.col-sm-*类column中添加.row并且包裹.col-sm-*。嵌套的rows需要包含一组columns，最多12个或者少一些。
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6