View on GitHub

栅格系统

借助12列系统、5个默认响应层、Sass变量和mixin以及数十个预定义类，使用我们强大的mobile first flexbox网格构建各种形状和大小的布局。

怎样工作

Bootstrap的网格系统使用一系列容器、行和列来布局和对齐内容。它采用flexbox设计，反应灵敏。下面是一个示例，深入了解了网格是如何组合在一起的。

刚接触或不熟悉flexbox? 阅读本CSS技巧flexbox指南，了解背景、术语、指南和代码片段。

One of three 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>

上面的示例使用预定义的网格类在小型、中型、大型和超大设备上创建三个等宽列。这些列在带有父级 .container的页面中居中。

分解它，下面是它的工作原理：

容器提供了一种将站点内容居中并水平放置的方法。使用.container 表示响应像素宽度，或使用 .container-fluid 表示在所有视口和设备大小上为 width: 100% 。
行是列的包装器。每列都有水平 padding (称为槽（ gutter）)，用于控制它们之间的padding。然后在具有负边距的行上抵消此填充。这样，列中的所有内容都会在视觉上从左侧向下对齐。
在网格布局中，内容必须放置在列中，并且只有列可以是行的直接子级。
由于flexbox，没有指定 width的网格列将自动作为等宽列进行布局。例如，.col-sm 的四个实例将自动从小断点向上扩展25%。有关更多示例，请参见自动布局列部分。
列类表示每行可能使用的12列中的列数。所以，如果您想要三个等宽的列，可以使用 .col-4。
列 width是以百分比设置的，因此它们相对于父元素总是流动的，并且大小也是固定的。
列具有水平 padding 以在各个列之间创建檐槽，但是，您可以删除行中的 margin 和 .row上 .no-gutters的列中的padding。
为了使网格响应，有五个网格断点，每个断点对应一个：所有断点（extra-small）、small、medium、large和extra-large。
网格断点基于最小宽度媒体查询，这意味着 它们适用于该断点及其上的所有断点 （例如，.col-sm-4 适用于小型、中型、大型和超大设备，但不适用于第一个 xs断点）。
您可以使用预定义的网格类（如 .col-4）或 Sass mixins 来进行更多的语义标记。

注意flexbox的局限性和缺陷，比如不能将一些HTML元素用作flex容器。

网格选项

Bootstrap使用 em 或 rem定义大多数大小， px用于网格断点和容器宽度。这是因为视口宽度以像素为单位，并且不随 font size而改变。

通过一个方便的表格，了解Bootstrap 网格系统的各个方面如何跨多个设备工作。

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# of columns	12
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Column ordering	Yes

自动布局列

利用特定于断点的列类来轻松调整列大小，而不需要显式的编号类，如 .col-sm-6。

等宽

例如，这里有两个网格布局，适用于从xs 到 xll的每个设备和视口。为每个断点添加任意数量的无单元类，每个列的宽度都相同。

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>

等宽多行

通过插入 .w-100来创建跨多行的等宽列，您希望这些列在此处换行。将 .w-100 与一些响应性显示工具混合，使中断响应。

有一个 Safari flexbox bug ，它阻止了在没有明确的 flex-basis 或 border的情况下工作。对于较旧的浏览器版本有一些变通方法，但是如果您的目标浏览器不属于有缺陷的版本，就不需要这些方法。

col

<div class="container">
  <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>
</div>

设置一列宽度

flexbox网格列的自动布局还意味着您可以设置一列的宽度，并使其周围的同级列自动调整大小。您可以使用预定义的网格类（如下所示）、网格混合或内联宽度。请注意，无论中心列的宽度如何，其他列都将调整大小。

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

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

可变宽度内容

使用 col-{breakpoint}-auto 类根据列内容的自然宽度调整列的大小。

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

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>

回应式类

Bootstrap的网格包括五层预定义的类，用于构建复杂的响应性布局。在您认为合适的超小型、小型、中型、大型或超大型设备上自定义列的大小。

所有断点

对于从最小设备到最大设备都相同的网格，请使用 .col 和 .col-* 类。当您需要一个特别大的列时，请指定一个编号的类；否则，可以继续使用 .col。

col

col-8

col-4

<div class="container">
  <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>
</div>

水平堆叠

使用一组 .col-sm-* 类，可以创建一个基本的网格系统，该系统从堆叠开始，在小断点（sm）处变为水平。

col-sm-8

col-sm-4

col-sm

<div class="container">
  <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>
</div>

混合搭配

不希望列简单地堆叠在一些网格层中吗？根据需要为每一层使用不同类的组合。请参阅下面的示例，以更好地了解其工作原理。

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.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>
</div>

槽（Gutters）

槽（Gutters）可以通过断点特定的填充和负边距实用程序类进行相应的调整。若要更改给定行中的檐槽，请将 .row上的负边距实用程序与.col上的匹配填充实用程序配对。可能还需要调整 .container 或 .container-fluid父级，以避免不必要的溢出，再次使用匹配填充实用程序。

下面是一个在大（lg）断点及以上自定义Bootstrap的示例。我们用.px-lg-5 增加了 .col 填充，用父.row上的 .mx-lg-n5抵消了这一点，然后用.px-lg-5 调整了 .container包装。

Custom column padding

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

行列

使用响应式 .row-cols-* 类快速设置最能呈现内容和布局的列数。普通的 .col-* 类应用于各个列（例如 .col-md-4），而行列类是作为快捷方式在父 .row上设置的。

使用这些行-列类可以快速创建基本网格布局或控制卡片布局。

Column

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

您还可以使用附带的Sass mixin， row-cols()：

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

对齐

使用flexbox对齐实用程序垂直和水平对齐列。 当flex容器的 min-height如下所示时，Internet Explorer 10-11不支持flex项目的垂直对齐。 有关更多详细信息，请参见FlexBug#3。

垂直对齐

One of three columns

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

One of three columns

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

水平对齐

One of two columns

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

在我们预定义的网格类中，列之间的gutters可以使用.no-gutters删除。这将删除.row的负 margin，和所有直接子列的水平 padding。

下面是创建这些样式的源代码。请注意，列重写的作用域仅限于第一个子列，并通过属性选择器作为目标。虽然这会生成一个更具体的选择器，但仍可以使用间距实用程序进一步自定义列填充。

需要边到边的设计吗？ 放下父 .container 或 .container-fluid。

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

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

实际上，它看起来是这样的。注意：您可以继续将其用于所有其他预定义的网格类（包括列宽、响应层、重排序等）。

.col-sm-6 .col-md-8

.col-6 .col-md-4

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

列包装

如果一行中放置的列数超过12列，则每组额外列将作为一个单元换行。

.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="container">
  <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>
</div>

列中断

在flexbox中将列拆分为新行需要一个小技巧：添加一个 width: 100% 的元素，无论您想在哪里将列包装到新行。通常这是通过多个.row来完成的，但不是每个实现方法都能解释这一点。

.col-6 .col-sm-3

<div class="container">
  <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>

您还可以在特定的断点上使用我们的响应显示实用程序进行此中断。

.col-6 .col-sm-4

<div class="container">
  <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>
</div>

重新排序

排序类

使用 .order- 类控制内容的视觉顺序。这些类是响应的，因此您可以按断点设置order（例如， .order-1.order-md-2）。包括对所有五个网格层的1到12的支持。

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

还有响应式 .order-first 和 .order-lastt类，它们分别通过应用order: -1 和 order: 13 (order: $columns + 1) 来更改元素的 order。这些类也可以根据需要与编号的 .order-*类混合使用。

First in DOM, ordered last

Second in DOM, unordered

Third in DOM, ordered first

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

偏移列

您可以通过两种方式偏移网格列：我们的响应式 .offset- 栅格类和 margin 实用程序。网格类的大小与列匹配，而边距对于偏移宽度可变的快速布局更有用。

偏移类

使用 .offset-md-*类向右移动列。这些类将列的左边距增加 *列。例如， .offset-md-4 在四列上移动 .col-md-4。

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <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>

除了在响应断点处进行列清除之外，还可能需要重新设置偏移量。在网格示例中可以看到这一点。

.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

<div class="container">
  <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>
</div>

边距实用程序

通过在v4中迁移到flexbox，您可以使用诸如 .mr-auto 之类的边距实用程序强制同级列彼此分离。

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <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>
</div>

嵌套

要使用默认网格嵌套内容，请在现有的.col-sm-* 列中添加一个新的 .row 和一组.col-sm-*列。嵌套行应包含一组最多12个或更少的列（不要求使用所有12个可用列）。

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

<div class="container">
  <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>
</div>

Sass mixins

使用Bootstrap的源Sass文件时，可以选择使用Sass变量和mixin来创建自定义、语义和响应页面布局。我们预定义的网格类使用这些相同的变量和mixin来为快速响应的布局提供一整套现成的类。

变量

变量和映射决定了列数、槽宽度以及开始浮动列的媒体查询点。我们使用这些来生成上面记录的预定义网格类，以及下面列出的定制mixin。

$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

mixin与网格变量一起使用，为单个网格列生成语义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);

示例用法

您可以将变量修改为自己的自定义值，或者只使用带有默认值的mixin。下面是一个使用默认设置创建两列之间有间隙的布局的示例。

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

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

自定义网格

使用我们内置的网格Sass变量和映射，可以完全定制预定义的网格类。更改层数、媒体查询维度和容器宽度，然后重新编译。

列和槽（Columns and gutters）

可以通过Sass变量修改网格列的数量。$grid-columns 用于生成每个单独列的宽度（以百分比为单位），而 $grid-gutter-width 用于设置列檐槽的宽度。

$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变量或映射进行任何更改时，需要保存更改并重新编译。这样做将输出一组全新的预定义网格类，用于列宽、偏移和排序。响应可见性实用程序也将更新为使用自定义断点。确保以px（而不是 rem、 em 或 %）设置网格值。