栅格系统

虽然原先一直用bootstrap3，但是也只是表面上了解的使用。随着现代浏览器的普及，以及大型应用页面的交互功能和需求越来越复杂，清楚的了解bootstrap的工作原理十分有必要。

弹性盒子系统的出现，使的前端人员纷纷趋之若鹜。他是那么的简洁与快速。然后出现了bootstrap4以及bulma这样的css项目，极大的方便了页面布局和样式。

今此，从网上查阅相关信息，没查到专门的中文版本，即使官网也只是部分翻译。于是专门翻译了bootstrap4的栅格系统部分，供自己学习查阅之用，也分享与有需要的人。（输入法问题错别字难免）

点击查看原文

得益于12列的系统，五个默认的自适应等级，sass的变量和mixins，以及一些列预定义的classes，加上强大的移动优先的弹性盒子栅格，来创建所有形状和尺寸的布局。

如何工作（实现）

bootstrap栅格系统使用一系列的的containers，rows以及columns来呈现内容以及设置内容的边距。它基于弹性盒子并且完全是自适应的。下面是一个可以说明他们是如何组织的比较深入的例子。

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

上述例子使用我们的预定义类可以在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都将是一样的宽度。

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

宽度相等的column可以断为多行，但是这里又一个safari弹性盒子bug，该bug在没有明确flex-basis或者border的情况下会组织这种效果的实现。这个bug只存在于叫老旧的浏览器版本中，如果你升级到高一点的版本，那么完全不用担心。

设置一个列的宽度 Setting one column width

自动适应宽度auto-layout的弹性盒子栅格系统也意味着你可以设置其中一个column的宽度，并且他的相邻的columns将会自动调整自己的宽度。你也可以使用预定义的栅格类，混合栅格，或者直接设置元素的宽度。然而其他的columns永远都会自动调整自己的宽度，无论中间的column宽度为多少。

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

根据内容可变的宽度 Variable widht content

通过使用col-{breakpoint}-auto类来设设置column的宽度为其内容的宽度。

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

多行宽度相等 Equal-width mutil-row

在你想要断开列column的地方插入一个.w-100，你将获得列宽想的多行效果。
如果想要断开的地方能够实现自适应的效果，你需要掺入一些自适应的组合类。

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

自适应类 Responsive classes

bootstrap栅格系统包括五个预定义的等级来建立复杂的自适应布局。定制的列的尺寸用来适应xs、sm、md、lg、xl这样的设备。

所有的断点（breakpoints）

如果想要从xs到xl都是一样的效果可以使用.col和.col-*类。
如果你需要一个特别的尺寸，你可以给类添加一个数值；此外，可以随意的使用.col。

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

水平堆放 Stacked to horizontal

使用一组.col-sm-*类你可创建一个在sm断点（breakpoint）之前一直是水平堆放的基本栅格系统。
（注：水平堆放，即水平方向一个挨着一个，如果大于行宽则自动换行。）

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

混合和匹配

混合：不同的断点混合。匹配：当设备不同时，匹配不同的断点效果。
不想让你的columns在一些栅格下只是简单的堆放。那就使用在不同等级断电下显示不同效果的断点类的组合吧。看下面的例子，一个显示效果更好的方法。

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

对齐 Alignment

使用弹性盒子方式来对列进行水平和垂直防线的对齐设置。

垂直对齐 Vertical alignment

• align-items-start
• align-items-center
• align-items-end

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

• align-self-start
• align-self-center
• align-self-end

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

水平对齐 Horizontal alignment

• justify-content-start
• justify-content-center
• justify-content-end
• justify-content-around
• justify-content-between

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

无间隙 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，更多）

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

列的包裹 columns wrapping

如果超过12columns被放在一个单独的row中，那么超过的columns将被作为一个单元，然后换行为新的一行。

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

列的折断 columns breaks

断开columns到一个新的一行需要一点小技巧：添加一个宽度为width:100%的元素到你想要断开的地方局。正常情况下这会变成一个多行效果，但是这个不是实现这个效果的最终方法。

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

你也可以使用这种在某个界点断块columns的方法。

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

重新排序 Reordering

排序类 order classes

使用.order-类来控制你的内容的视觉顺序。这些类也是可以自适应的，所以你可以通过breakpoint设置order（例如，.order-1.order-md-2)。支持从1到12的所有的栅格层级断点。

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

这里也有自适应的.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宽度的位置。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

除了在某些界点column的清除之外，你也许需要重新设置位移，看下面的例子。

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

与margin配合 Margin utilities

随着v4转移到了弹性盒子，你可以使用margin组合类，例如.mr-auto去强制相邻column彼此分开。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

嵌套 Nesting

为了使用默认的栅格系统嵌套组合你的内容。你可在.col-sm-*类column中添加.row并且包裹.col-sm-*。嵌套的rows需要包含一组columns，最多12个或者少一些。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>