栅格系统

借助十二列系统,五个默认响应层,Sass 变量和 mixins 以及数十个预定义类,使用我们强大的移动优先 flexbox 栅格来构建各种形状和大小的布局。

它是怎么做到的?

Bootstrap 的栅格系统使用一系列容器,行和列来布局和对齐内容。 它是用 flexbox 构建的,并且完全响应。 下面是一个示例,并深入了解栅格如何组合在一起。

没听说过 flexbox? 在这里看看什么是flexbox

One of three columns
One of three columns
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的中心位置。

理解它的工作原理:

请注意 flexbox 存在的限制和 bug, 例如 无法将某些 HTML 元素用作 Flex 容器.

栅格系统 选项

虽然 Bootstrap 使用 ems 或 rems 来定义大多数大小,但 px 用于栅格断点和容器宽度。 这是因为 viewport 宽度以像素为单位,并且不随字体大小而变化。

你可以通过改变当前浏览器的大小来了解 Bootstrap 栅格系统的各个方面如何通过在多个设备上工作(因为本文档就是基于 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

等宽

例如,这里有两个适用于每个设备和 viewport 的栅格布局,从 xs 到 xl。 为你需要的每个断点添加任意数量的无单位类,每列的宽度相同。

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-basis 或 border 的情况下工作。 旧浏览器版本有变通方法,但如果你是最新的,则不需要它们。

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

多行等宽

通过在希望列断开到新行的位置插入.w-100,创建跨越多行的等宽列。 通过将.w-100与一些响应式显示工具混合来使响应中断。

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>

响应式设计CSS类

Bootstrap 的栅格包括五层预定义类,用于构建复杂的响应式布局。 根据你认为合适的额外小型,小型,中型,大型或超大型设备自定义列的大小。

所有的断点

对于从最小设备到最大设备相同的栅格,请使用 .col 和 .col-* 类。 需要特别大小的列时,请指定编号的类; 否则,请只使用 .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-* 类,你可以创建一个基本的栅格系统,该系统开始堆叠并在小断点(sm)处变为水平。

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

对齐

使用 flexbox 对齐工具垂直和水平对齐列。

垂直对齐

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
<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
One of three columns
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
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
<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 删除。 这将从 .row 中删除负边距,并从所有直接子列中删除水平边距。

这是创建这些样式的源代码。 请注意,列覆盖仅限于第一个子列,并通过属性选择器进行定位。 虽然这会生成更具体的选择器,但仍可以使用间距工具进一步自定义列填充。

采用了无边框地设计方案? 只需要把上层的 .container 类 或 .container-fluid 类移除。

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

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

在实践中,这是它的外观。 请注意,你可以继续将其与所有其他预定义栅格类(包括列宽,响应层,重新排序等)一起使用。

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

列包含

如果在一行中放置超过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="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>

列拆分

将列拆分为 flexbox 中的新行需要一个小的 hack:添加宽度为100%的元素,无论你是否想将列包装到新行。 通常,这是通过多个 .rows 完成的,但并非每种实现方法都可以解释这一点。

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

重新排列

Order 类

使用 .order- 类来控制内容的可视顺序。 这些类是响应式的,因此你可以通过断点设置顺序 (例如 .order-1.order-md-2)。 包括 112 都可以在栅格系统中受到支持。

First, but unordered
Second, but last
Third, but first
<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 对元素进行 order: -1order: 13 (order: $columns + 1), 这些类也可以根据需要与编号为 .order-* 的类混合。

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

列偏移

你可以通过两种方式偏移栅格列:响应式 .offset- 栅格类和我们的margin工具。 栅格类的大小可以匹配列,而边距对于偏移宽度可变的快速布局更有用。

Offset 类

使用 .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-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-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-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 工具

你可以使用诸如 .mr-auto 之类的margin 工具来强制兄弟列彼此远离。

.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-* 列中的列。 嵌套行应包含一组最多可添加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 来提供一整套即用型类,以实现快速响应式布局。

变量

变量和映射确定列的数量,装订线宽度以及开始浮动列的媒体查询点。 我们使用它们来生成上面记录的预定义栅格类,以及下面列出的自定义混合类。

$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

Mixins 与栅格变量结合使用,为各个栅格列生成语义 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>

自定义栅格

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

列和间隙

可以通过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中设置栅格值(不是 remem%)。