网格系统

示例

¥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）。这意味着你可以通过每个断点控制容器和列的大小和行为。

  ¥Our grid supports six responsive breakpoints. Breakpoints are based on min-width media queries, meaning they affect that breakpoint and all those above it (e.g., .col-sm-4 applies to sm, md, lg, xl, and xxl). This means you can control container and column sizing and behavior by each breakpoint.

• 容器居中并水平填充你的内容。使用 .container 表示响应式像素宽度，使用 .container-fluid 表示跨所有视口和设备的 width: 100%，或使用响应式容器（例如 .container-md）表示流体和像素宽度的组合。

  ¥Containers center and horizontally pad your content. Use .container for a responsive pixel width, .container-fluid for width: 100% across all viewports and devices, or a responsive container (e.g., .container-md) for a combination of fluid and pixel widths.

• 行是列的封装。每列都有水平 padding（称为装订线），用于控制它们之间的空间。然后，该 padding 会在具有负边距的行上抵消，以确保列中的内容在视觉上与左侧对齐。Rows 还支持 统一应用列大小 和 gutter 类 修饰符类来更改内容的间距。

  ¥Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to uniformly apply column sizing and gutter classes to change the spacing of your content.

• 列非常灵活。每行有 12 个可用的模板列，允许你创建跨越任意数量列的不同元素组合。列类别指示要跨越的模板列数（例如，col-4 跨越四个）。width 以百分比设置，因此你始终具有相同的相对尺寸。

  ¥Columns are incredibly flexible. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., col-4 spans four). widths are set in percentages so you always have the same relative sizing.

• 装订线也是响应式且可定制的。Gutter classes are available across all breakpoints, with all the same sizes as our margin and padding spacing.将水平装订线更改为 .gx-* 类，将垂直装订线更改为 .gy-*，或将所有装订线更改为 .g-* 类。.g-0 也可用于去除装订线。

  ¥Gutters are also responsive and customizable. Gutter classes are available across all breakpoints, with all the same sizes as our margin and padding spacing. Change horizontal gutters with .gx-* classes, vertical gutters with .gy-*, or all gutters with .g-* classes. .g-0 is also available to remove gutters.

• Sass 变量、映射和 mixins 为网格提供动力。如果你不想在 Bootstrap 中使用预定义的网格类，你可以使用我们的 grid 的源码 Sass 创建你自己的具有更多语义标记的网格类。我们还包含一些 CSS 自定义属性来使用这些 Sass 变量，为你提供更大的灵活性。

  ¥Sass variables, maps, and mixins power the grid. If you don’t want to use the predefined grid classes in Bootstrap, you can use our grid’s source Sass to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.

请注意 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)

  ¥Extra small (xs)

• 小（平方）

  ¥Small (sm)

• 中（MD）

  ¥Medium (md)

• 大（lg）

  ¥Large (lg)

• 特大号（XL）

  ¥Extra large (xl)

• 特大号 (xxl)

  ¥Extra extra large (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 网格列的自动布局还意味着你可以设置一列的宽度，并让同级列在其周围自动调整大小。你可以使用预定义的网格类（如下所示）、网格混合或内联宽度。请注意，无论中心列的宽度如何，其他列都会调整大小。

¥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 变量和 mixins 来创建自定义、语义和响应式页面布局。我们预定义的网格类使用这些相同的变量和混合来为快速响应布局提供一整套即用型类。

¥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

你可以将变量修改为你自己的自定义值，或者仅使用 mixins 及其默认值。以下是使用默认设置创建之间有间隙的两列布局的示例。

¥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 %).