我的书签
添加书签
移除书签- 栅格系统
- 机制原理
- 栅格选项
- 自动布局列
- 等宽布局
- 设置一列宽度
- 可变宽度的弹性空间
- 等宽多行
- 响应式的class选择器
- 覆盖所有设备
- 水平堆砌
- 混合布局
- 沟槽
- 对齐
- 垂直对齐示例
- 水平对齐示例
- 间隙沟槽(gutters)清除
- 列换行
- 换行
- 重排序
- Class顺序重定义
- 列偏移
- class偏移选择器
- Margin移动布局
- 列嵌套
- Sass mixins
- 变量
- 混合
- 应用案例
- 自定义栅格系统
- 自定义列和间隙
- 自定义栅格
栅格系统
Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)，支持Sass mixins自由调用，并结合自己预定义的CSS、Js类，用来创建各种形状和尺寸的布局。
机制原理
Bootstrap的网格系统使用一系列div容器的行、列来布局和对齐内容，不同于旧版3.0，新版是完全基于flexbox流式布局构建的，完全支持响应式标准。下面的示例，可以让我们深入了解网格如何组合在一起。
新手不熟悉flexbox？阅读这篇关于flexbox布局文章，可以了解其背景、术语、规则和示例代码。
中文版的FlexBox布局教程可见：https://www.z01.com/help/web/3234.shtml （译者注）
<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使用ems或rems来定义大多数属性的规格大小、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就可以完成。
<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-basis或border（影响到边框效果）。 Bootstrap非官方的一个实例，已经介绍了两种解决方法，但如果是最新safri浏览器下，则不需要这样做。
下面是等宽列两行的处理方法，引用w-100进行切割分行：
<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的布局上，拥有很多现代特征，比如自动布局和列宽处理。你可以在一行多列的情况下，特别指定一列并进行宽度定义，同时其它列自动调整大小，可以使用预定义的栅格类（如下所示），从而实行栅格宽或行宽的优化处理。注意在这种民琣上，无论中心定义列的宽度如何，其他列都将调整大小。
<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 断点方法，可以实现根据其内容的自然宽度来对列进行大小调整。.
<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有时可以达到同样的网页效果。
<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就可以了。
<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-后，自动成为每列一行、水平堆砌。改变网页屏幕宽度你可以在下面列子看到效果：
<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>
混合布局
设计师们当然不会简单的把各个屏幕下的栅格都做成一样，那将是单调乏味的，所以你可以根据需要对每一个列进行不同的设备定义。下方示例展示了原理：
<!-- 定义在超小屏幕下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>
沟槽
可以通过特定于断点的填充和负边距实用程序类来响应地调整装订线。 要更改给定行中的装订线，请在.row 上配置负边距实用程序，并在.col上配对匹配填充实用程序。 可能需要调整.container或.container-fluid 父级以避免不必要的溢出，再次使用匹配的填充实用程序.
这是一个在大(lg) 断点及以上定制Bootstrap网格的示例。 我们使用.px-lg-5增加了.col填充, 在父.row上使用.mx-lg-n5进行了抵消，然后使用.px-lg-5 调整了.container包装.
<div class="container px-lg-5"><div class="row mx-lg-n5"><div class="col py-3 px-lg-5 border bg-light">Custom column padding</div><div class="col py-3 px-lg-5 border bg-light">Custom column padding</div></div></div>
对齐
使用flexbox对齐实用程序垂直和水平对齐列.Flex容器具有min-height时，Internet Explorer 10-11不支持弹性项目的垂直对齐，如下所示。 有关详细信息，请参阅Flexbugs＃3.
垂直对齐示例
<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的margin或padding处理，您可以使用.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预定义的栅格系统（包括列宽、响应层、属性、排序等）：
<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会在保留列完整的前提下，将无法平行布局的多余列，重置到下一行，并占用一个完整的新行。
<div class="row"><div class="col-9">.col-9</div><div class="col-4">.col-4<br>Since 9 + 4 = 13 > 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，目前没有更好的方案）。
<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>
也可以结合响应式实用程序来换行(切割)。
<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个级别的顺序，在五种浏览器和设备宽度上都能生效。
<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-*混合使用。
<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则是向右偏移四列。
<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>
除了在响应断点处清除列，您可能需要重置偏移量，下面的栅格示例展示了这一点：
<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来强制隔离两边的距离，实现类水平隔离的效果。
<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列-否则应对页面进行重新规划布局）。
<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 / phonexs: 0,// Small screen / phonesm: 576px,// Medium screen / tabletmd: 768px,// Large screen / desktoplg: 992px,// Extra large screen / wide desktopxl: 1200px);$container-max-widths: (sm: 540px,md: 720px,lg: 960px,xl: 1140px);
混合
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);}}
<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单位（而不是rem、em或%）。
