网格系统

示例

🌐 Example

Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。它是用 flexbox 构建的，并且完全响应式。下面是一个示例以及网格系统如何组合在一起的详细说明。

🌐 Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

上面的示例使用我们预定义的网格类在所有设备和视口上创建三个等宽的列。这些列在页面中通过父元素 .container 居中。

🌐 The above example creates three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent .container.

怎么运行的

🌐 How it works

分解一下，网格系统的结构如下：

🌐 Breaking it down, here’s how the grid system comes together:

• 我们的网格支持六个响应断点。 断点基于 min-width 媒体查询，这意味着它们会影响该断点及其之上的所有断点（例如，.col-sm-4 适用于 sm、md、lg、xl 和 xxl）。这意味着你可以通过每个断点来控制容器和列的大小及行为。
• 容器使你的内容居中并水平填充。 使用 .container 以响应式像素宽度，使用 .container-fluid 对所有视口和设备设置 width: 100%，或者使用响应式容器（例如 .container-md）来结合流式和固定像素宽度。
• 行是列的封装容器。 每一列都有水平的 padding（称为间距）用于控制列之间的空间。然后，这个 padding 会通过在行上使用负边距来抵消，以确保列中的内容在视觉上沿左侧对齐。行还支持修饰类，用于统一应用列尺寸和间距类以改变内容的间距。
• 列非常灵活。 每行有 12 个模板列可用，允许你创建跨任意列数的不同元素组合。列类表示要跨越的模板列数（例如，col-4 跨越四列）。width 是按百分比设置的，因此你总能保持相同的相对大小。
• 边距（Gutters）也是响应式且可自定义的。 边距类可用于所有断点，且具有与我们的边距和内边距间距相同的所有尺寸。使用 .gx-* 类更改水平边距，使用 .gy-* 类更改垂直边距，或使用 .g-* 类更改所有边距。.g-0 也可用于移除边距。
• Sass 变量、映射和混入驱动网格。 如果你不想使用 Bootstrap 中预定义的网格类，你可以使用我们的 网格源 Sass 来创建自己更语义化的标记。我们还包括了一些 CSS 自定义属性，以便使用这些 Sass 变量，为你提供更大的灵活性。

注意 flexbox 的限制和相关漏洞，例如无法将某些 HTML 元素用作 flex 容器。

🌐 Be aware of the limitations and bugs around flexbox, like the inability to use some HTML elements as flex containers.

网格选项

🌐 Grid options

Bootstrap 的网格系统可以适应所有六个默认断点，以及你自定义的任何断点。六个默认的网格层如下：

🌐 Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follows:

• 特小号 (xs)
• 小（平方）
• 中（MD）
• 大（lg）
• 特大号（XL）
• 特大号 (xxl)

如上所述，这些断点中的每一个都有自己的容器、独特的类前缀和修饰符。以下是网格在这些断点之间的变化方式：

🌐 As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here’s how the grid changes across these breakpoints:

自动布局列

🌐 Auto-layout columns

使用特定断点的列类可以轻松设置列大小，而无需像 .col-sm-6 这样的显式编号类。

🌐 Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .col-sm-6.

等宽

🌐 Equal-width

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

🌐 For example, here are two grid layouts that apply to every device and viewport, from xs to xxl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

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

设置一列宽度

🌐 Setting one column width

用于 flexbox 网格列的自动布局也意味着你可以设置一列的宽度，并让其他列自动围绕它调整大小。你可以使用预定义的网格类（如下所示）、网格 mixin 或内联宽度。请注意，无论中间列的宽度如何，其他列都会调整大小。

🌐 Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

<div class="container text-center">
  <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 width content

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

🌐 Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.

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

响应式类

🌐 Responsive classes

Bootstrap 的网格包括六个预定义的类层，用于构建复杂的响应式布局。你可以根据需要在超小、小、中、大或超大设备上自定义列的大小。

🌐 Bootstrap’s grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

所有断点

🌐 All breakpoints

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

🌐 For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.

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

水平堆叠

🌐 Stacked to horizontal

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

🌐 Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (sm).

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

连连看

🌐 Mix and match

不想让你的列只是简单地堆叠在某些网格层中吗？根据需要为每个层使用不同类的组合。请参阅下面的例子，以更好地了解它是如何工作的。

🌐 Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

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

行列

🌐 Row columns

使用响应式 .row-cols-* 类可以快速设置最适合显示内容和布局的列数。而普通的 .col-* 类应用于单独的列（例如 .col-md-4），行列类则设置在父元素 .row 上，作为快捷方式。使用 .row-cols-auto 可以让列具有它们的自然宽度。

🌐 Use the responsive .row-cols-* classes to quickly set the number of columns that best render your content and layout. Whereas normal .col-* classes apply to the individual columns (e.g., .col-md-4), the row columns classes are set on the parent .row as a shortcut. With .row-cols-auto you can give the columns their natural width.

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

🌐 Use these row columns classes to quickly create basic grid layouts or to control your card layouts.

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

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

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

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

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

<div class="container text-center">
  <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()：

🌐 You can also use the accompanying 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);
  }
}

嵌套

🌐 Nesting

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

🌐 To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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>

CSS

在使用 Bootstrap 的源 Sass 文件时，你可以选择使用 Sass 变量和混入来创建自定义的、语义化的、响应式的页面布局。我们预定义的网格类使用这些相同的变量和混入，提供了一整套可立即使用的类，以实现快速的响应式布局。

🌐 When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Sass 变量

🌐 Sass variables

变量和网格图决定列数、列间距以及开始浮动列的媒体查询点。我们使用这些来生成上述文档中记录的预定义网格类，以及下面列出的自定义混合宏。

🌐 Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

Sass 混入

🌐 Sass mixins

Mixin 与网格变量结合使用，为各个网格列生成语义 CSS。

🌐 Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

// 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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

用法示例

🌐 Example usage

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

🌐 You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.

.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);
  }
}

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

自定义网格

🌐 Customizing the grid

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

🌐 Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

柱子和装订线

🌐 Columns and gutters

网格列的数量可以通过 Sass 变量进行修改。$grid-columns 用于生成每列的宽度（以百分比为单位），而 $grid-gutter-width 设置列间隙的宽度。$grid-row-columns 用于设置 .row-cols-* 的最大列数，超过此限制的数量将被忽略。

🌐 The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width sets the width for the column gutters. $grid-row-columns is used to set the maximum number of columns of .row-cols-*, any number over this limit is ignored.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

网格层

🌐 Grid tiers

超越列本身，你还可以自定义网格层的数量。如果你只想要四个网格层，你可以将 $grid-breakpoints 和 $container-max-widths 更新为如下内容：

🌐 Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the $grid-breakpoints and $container-max-widths to something like this:

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

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

在对 Sass 变量或映射进行任何更改时，你需要保存更改并重新编译。这样将输出一套全新的用于列宽、偏移和排序的预定义网格类。响应式可见性工具也将更新以使用自定义断点。确保在 px 中设置网格值（而不是 rem、em 或 %）。

🌐 When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand-new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in px (not rem, em, or %).