栅格系统

Bootstrap包含了一个强大的移动优先的网格系统,它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕),支持Sass mixins自由调用,并结合自己预定义的CSS、Js类,用来创建各种形状和尺寸的布局。

机制原理

Bootstrap的网格系统使用一系列div容器的行、列来布局和对齐内容,不同于旧版3.0,新版是完全基于flexbox流式布局构建的,完全支持响应式标准。下面的示例,可以让我们深入了解网格如何组合在一起。

新手不熟悉flexbox? 阅读这篇关于flexbox布局文章,可以了解其背景、术语、规则和示例代码。

三分之一空间占位
三分之一空间占位
三分之一空间占位
<div class="container">
  <div class="row">
    <div class="col-sm">
      三分之一空间占位
    </div>
    <div class="col-sm">
      三分之一空间占位
    </div>
    <div class="col-sm">
      三分之一空间占位
    </div>
  </div>
</div>

上面的例子使用BootStrap预定义的栅格系统,演示了在.container容器内建立了三个等宽的列,并且分别兼容在small(极窄宽度网页)、medium(中等宽度网页)、large(宽网页)、extra large(超宽网页)四种设备类型-即无论网页宽度如何,这三个列都是恒在呈现的。

让我们来慢慢揭开它的工作原理:

  • 栅格系统提供了集中内容居中、水平填充网页内容的方法,使用.container(严格意义上也包括.container-fluid,后文相同不再备注-译者)应答网页宽度,或使用.container-fluid使网页能够以100%宽度呈现在所有的浏览器窗口或设备尺寸上。
    换一个说法就是:.container实现固定的宽度并居中呈现,.container-fluid实现全宽度,并和其它网格实现对齐(译者注)。
  • 行(.row)是列(.col-*)的横向组合和父容器(它们有效组织在.row下),每列都有水平的padding值,用于控制它们之间的间隔,同时在负边距的行上抵消,从而实现列中的所有内容在视觉上是左侧对齐的体验。
  • 网页开发者的呈现内容必须放置在列(.col-*中,而且只有列可以是行的直接子元素,否则都是违法的(不可以在.col-*以上添加呈现内容。
  • 这一切都要感谢flexbox流式布局,从而使我们不需要指定列的宽度(旧版Bootsrap3是采用严格宽度定义来实现的)就能实现网页自动等宽排列,比如我们在.container中置入初始化的四个.col-sm就能实现各自25%宽度并左对齐形成一行的排列。更多示例,请参阅本文档 自动布局列部分。
  • 你可能注意到.col-*后面有不同的数字,如.col-sm-4.col-xl-12,这些css类后面的数字用于表明定义div空间想要占用列的数量,每行最多有12列。如果你想用三个等宽的列,则取12的三分之一,即.col-sm-4就是正确的(后文会有详细的介绍)。
  • .col-*width属性(即列宽)是用百分比来表现和定义的,所以它们总是流式的,其尺寸大小受父元素的定义影响(这正是flexbox布局的特征,子元素的宽比和排列受父元素定义)。
  • 列具有水平padding定义,用于创建列与列之的间隙。
  • .row上带有margin-left: -15px;margin-right: -15px;属性,你可以在.row上上定义.no-gutters属性,从而消除这个属性,使页面不会额外宽出30px,即<div class="row no-gutters"...。(译者原意拆成两行表述)。
  • 总共有五个栅格等级,每个响应式分界点隔出一个等级:特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大(大、特大也可以称为宽、超宽).col-xl-*
  • 栅格断点的媒体查询基于宽度的最小值,意味着它们应用到某一等级以及这一等级之上的所有(如.col-sm-4的的定义可以在小型、中型、宽、超宽设备上呈现,但不适用于能在超小型.col-sx上呈现)。
  • 用户不需要自行定义网格,可以直接使用系统预定义的栅格类(如.col-4)或采用Sass mixins来进行更多的语义标记满足开发需要。

请注意:Flexbox布局虽然很先进,但也有一定的限制和错误,如无法使用某些HTML元素作为弹性容器,点此可扩展相关知识

栅格选项

Bootstrap使用emsrems来定义大多数属性的规格大小、px用于全局层面网格断点和容器宽度(因为浏览器和设备的宽度是以像素px为单位,且不会随字体大小而变化)。

通过一个简单的表格查看Bootstrap的网格系统在各种屏幕和设备上的细节约定:

超小屏幕
(新增规格)<576px
小屏幕
次小屏≥576px
中等屏幕
窄屏≥768px
大屏幕
桌面显示器≥992px
超大屏幕
大桌面显示器≥1200px
.container 最大宽度 None (auto) 540px 720px 960px 1140px
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl-
列(column)数 12
列间隙 30px (每列两侧各15px)
可嵌套性 Yes
可排序性 Yes

译者注:

1、在Bootstrap 4中,屏幕的大小是真正的“断点”,即如果只定义一个屏幕规格即可向上覆盖所有设备,向下如果没有定义则默认为12栅格占位-译者注。

2、有版本将540px断点翻译为平板,目前业界平板(如ipad)进入高清屏幕时代,故本翻译不作此处理以符发展需求。

3、实践中,一个<div class="col"></div><div class="col-N"></div>代表手机断点

自动布局列

利用栅格断点特性进行排版,可以简化列的大小,而不需要批定显式的列宽,如强制写为:.col-sm-6

等宽布局

下面的列子,展示了一行两列与一行三列的布局,从xs(如上表如见,实际上并不存在xs这个空间命名,是以.col表示,下同不再注)到xl(即.col-xl-*)所有设备上都是等宽并占满一行,只要简单的应用.col就可以完成。

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
<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>

等宽列可以分成多行,但是有一个Safari旧版浏览器的flexbox错误,阻止它在没有显示flex-basisborder(影响到边框效果)。
Bootstrap非官方的一个实例,已经介绍了两种解决方法,但如果是最新safri浏览器下,则不需要这样做。

下面是等宽列两行的处理方法,引用w-100进行切割分行:

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

设置一列宽度

在Flexbox的布局上,拥有很多现代特征,比如自动布局和列宽处理。你可以在一行多列的情况下,特别指定一列并进行宽度定义,同时其它列自动调整大小,可以使用预定义的栅格类(如下所示),从而实行栅格宽或行宽的优化处理。注意在这种民琣上,无论中心定义列的宽度如何,其他列都将调整大小。

1 of 3
2 of 3 (更宽-12格中占6格,其它6格另外两列平分)
3 of 3
1 of 3
2 of 3 (更宽-12格中占5格,其它7格另外两列平分-不论奇偶都能达成)
3 of 3
<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (更宽-12格中占6格,其它6格另外两列平分)
    </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 (更宽-12格中占5格,其它7格另外两列平分-不论奇偶都能达成)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

可变宽度的弹性空间

使用 col-{breakpoint}-auto 断点方法,可以实现根据其内容的自然宽度来对列进行大小调整。.

1 of 3
可变宽度内容自由伸张,左右宽度不变。
3 of 3
1 of 3
可变宽度内容自由伸张,左列宽度变化(右列绑定co-lg-2栅格数)
3 of 3
<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>

等宽多行

创建跨多个行的等宽列,方法是插入.w-100要将列拆分为新行。通过混合.w-100一些还可以影响一些显示状态效果,如按钮排序等。

译者注:这部份其实和上面safri浏览器bug讲解重复了,但官网如此保持尊重。

又注:.w100似乎与.clearfix有时可以达到同样的网页效果。

col
col
col
col
<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>

响应式的class选择器

Bootstrap的栅格系统包括五种宽带预定义,用于构建复杂的响应布局,你可以根据需要定义在特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大.col-xl-*五种屏幕(设备)下的样式。

覆盖所有设备

如果要一次性定义从最小设备到最大设备相同的网格系统布局表现,请使用.col.col-*类。后者是用于指定特定大小的(如.col-6),否则使用.col就可以了。

col
col
col
col
col-8
col-4
<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>

水平堆砌

使用单一的.col-sm-*类方法,可以创建一个基本的网格系统,此时如果没有指定其它媒体查询断点宽度,这个栅格系统是成立的,而且会随着屏幕变窄成为超小屏幕.col-后,自动成为每列一行、水平堆砌。改变网页屏幕宽度你可以在下面列子看到效果:

col-sm-8
col-sm-4
col-sm
col-sm
col-sm
<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>

混合布局

设计师们当然不会简单的把各个屏幕下的栅格都做成一样,那将是单调乏味的,所以你可以根据需要对每一个列进行不同的设备定义。下方示例展示了原理:

.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
<!-- 定义在超小屏幕下1列全宽、1列半宽,而其它场景以8:4比例并行排列 -->
<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>

对齐

flexbox布局可以轻松的实现DIV空间布局的垂直、水平对齐。

垂直对齐示例

上边贴齐
上边贴齐
上边贴齐s
上下居中对齐
上下居中对齐
上下居中对齐
下边对齐
下边对齐
下边对齐
<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>
上边对齐
上下居中对齐
下边对齐
<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>

水平对齐示例

左贴齐对齐
左贴齐对齐
居中贴齐
居中贴齐
右贴齐对齐
右贴齐对齐
间隔相等对齐帖齐
间隔相等对齐帖齐
两端对齐帖齐
两端对齐帖齐
<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>

间隙沟槽(gutters)清除

BootStrap默认的栅格和列间有间隙沟槽,一般是左右-15px的marginpadding处理,您可以使用.no-gutters类来消除它,这将影响到.row行、列平行间隙及所有子列。

以下是创建这些样式的源代码。注意,列替换仅限于第一个子列,并通过属性选择器进行定位。当这产生一个更具体的选择器时,列填充仍然可以使用间隔实用程序进一步定制。

如果你需要无边缝设计(edge-to-edge design),则请在父DIV中放弃.container.container-fluid容器。

.no-gutters {
  margin-right: 0;
  margin-left: 0;

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

下方为实际效果展示,您可以继续使用所有BootStrap预定义的栅格系统(包括列宽、响应层、属性、排序等):

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
<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>

列换行

如果在一行内子DIV定义的栅格总数超过12列,BootStrap会在保留列完整的前提下,将无法平行布局的多余列,重置到下一行,并占用一个完整的新行。

.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.
<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>

换行

一般换行推荐使用添加多个.row来达成,否则你可以使用系统提供的.w-100方法处理,其思路是强行插入一个width:100%的DIV进行隔离切断(前文有两处提到,这是Flexbox流式布局的一个Hack,目前没有更好的方案)。

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
<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>

也可以结合响应式实用程序来换行(切割)。

.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
<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>

重排序

Class顺序重定义

使用 .order-* class选择符,可以对DIV空间进行 可视化排序,系统提供了.order-1.order-1212个级别的顺序,在五种浏览器和设备宽度上都能生效。

1号空间-未定义序号,位置不变。
2号空间-排最后。
3号空间-放第1但受1号空间不变影响居第2位。
<div class="container">
  <div class="row">
    <div class="col">
      1号空间-未定义序号,位置不变。
    </div>
    <div class="col order-12">
      2号空间-排最后。
    </div>
    <div class="col order-1">
      3号空间-放第1但受1号空间不变影响居第2位。 
    </div>
  </div>
</div>

还可以使用.order-first,快速更改一个顺序到最前面,同时其它元素也相应的获得了order:-1的属性,这个属性也可以与。.order-*混合使用。

1号空间-未定义顺序。
2号空间-未定义顺序。
3号空间-优先排序,占第1位。
<div class="container">
  <div class="row">
    <div class="col">
       1号空间-未定义顺序。
    </div>
    <div class="col">
       2号空间-未定义顺序。
    </div>
    <div class="col order-first">
      3号空间-优先排序,占第1位。
    </div>
  </div>
</div>

列偏移

可以使用两种方式进行列偏应:
1、使用响应式的.offset-*栅格偏移方法。
2、使用边界处理实用程序,它内置了诸如.ml-*.p-*.pt-*等实用排工具。

class偏移选择器

使用.offset-md-*类可以使列向右偏移,通过定义*的数字,则可以实现列偏移,如.offset-md-4则是向右偏移四列。

.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
<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>

除了在响应断点处清除列,您可能需要重置偏移量,下面的栅格示例展示了这一点:

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col.col-sm-6.col-md-5.col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
<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.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移动布局

在BootStrap V4中,你可以使用.ml-auto.mr-auto来强制隔离两边的距离,实现类水平隔离的效果。

.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
<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>

列嵌套

为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行(row)所包含的列(column)数量推荐不要超过12个(其实,没有要求你必须占满12列-否则应对页面进行重新规划布局)。

Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
<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>

Sass mixins

用Bootstrap的源Sass文件时,你可以选择使用Sass变量,或者mixins,以创建自定义的、语义化的、响应式的网页布局。我们的预建类使用相同的变量以及mixins,为快速响应布局提供整个现成的套件。

变量

变量决定列的数量、缝隙宽度以及切换到浮动列的媒体查询点,们用这些来生成上文提及的预定义网格列,定制出如下所示的自定义mixins:

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mixins

MMixins用来联合网格变量,为每个网格列生成语义化的CSS。

// Creates a wrapper for a series of columns 
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

应用案例

你可以将变量修改为你自己定义的值,或者直接使用mixins的默认值。下面例子即使用默认设置创建两列布局以及一个列与列之间的缝隙:

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}
Main content
Secondary content
<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

自定义栅格系统

使用BootStrap v4内置的栅格系统之Sass变量和 maps文件,可以完全自定义自己的栅格格环境、并可以更改DIV层次、媒体查询维度和container容器宽度,然后重新编译。

自定义列和间隙

以通过修改Sass变量、重定义栅格系统列的数量,使用$grid-columns命令可生成每个单独列的宽度(以百分比表示),同时$$grid-gutter-width允许在平行排列$padding-left$padding-right对于平台间隔均匀分割的断点特定宽度。

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

自定义栅格

超越自我,您还可以自定义网格层数。如果你只想要四个格子层,只要更新$$grid-breakpoints$$container-max-widths等类参数。

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

对Sass变量或map文件进行任何更改,都需要保存更改并重新编译。这样做将为列宽度,偏移量和排序输出一组全新的预定义栅格类。响应可见性实用程序也将更新为使用自定义断点,同时濂晨设置网格值时是采用px单位(而不是remem%)。