Grid system网格系统

Example例子

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. Bootstrap的网格系统使用一系列容器、行和列来布局和对齐内容。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">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>

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.这些列在带有父.container的页面中居中。

How it works作用原理

Breaking it down, here’s how the grid system comes together:分解它，以下是网格系统是如何组合在一起的：

• 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). 断点基于min0width媒体查询，这意味着它们会影响该断点及其上的所有断点（例如，col-sm-4适用于sm、md、lg、xl和xxl）。This means you can control container and column sizing and behavior by each breakpoint.这意味着您可以通过每个断点控制容器和列的大小以及行为。

• 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.使用.container表示响应像素宽度，.container-fluid表示在所有视口和设备中使用width: 100%，或使用响应容器（例如，.container-md）表示流体和像素宽度的组合。

• 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. 然后在具有负边距的行上抵消此padding，以确保列中的内容在视觉上沿左侧向下对齐。Rows also support modifier classes to uniformly apply column sizing and gutter classes to change the spacing of your content.行还支持修饰符类来一致性应用列尺寸和间沟类来更改内容的间距。

• 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. 每行有12个模板列可用，允许您创建跨越任意列数的不同元素组合。Column classes indicate the number of template columns to span (e.g., col-4 spans four). 列类表示要跨越的模板列的数量（例如，col-4跨越四个）。widths are set in percentages so you always have the same relative sizing.width是以百分比设置的，因此您始终具有相同的相对大小。

• 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. 将水平间沟更改为.gx-*类，将垂直间沟更改为.gy-*，或将所有间沟更改为.g-*类。.g-0 is also available to remove gutters.g-0也可用于移除间沟。

• Sass variables, maps, and mixins power the grid.Sass变量、映射和混合为网格供电。 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. 如果您不想在Bootstrap中使用预定义的网格类，可以使用我们的网格源Sass创建自己的具有更多语义标记的网格类。We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.我们还包括一些CSS自定义属性来使用这些Sass变量，从而为您提供更大的灵活性。

Be aware of the limitations and bugs around flexbox, like the inability to use some HTML elements as flex containers.请注意弹性盒的局限性和缺陷，例如无法将某些HTML元素用作弹性容器。

Grid options网格选项

Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you customize. Bootstrap的网格系统可以适应所有六个默认断点以及您自定义的任何断点。The six default grid tiers are as follow:六个默认网格层如下所示：

• Extra small (xs)
• Small (sm)
• Medium (md)
• Large (lg)
• Extra large (xl)
• 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自动布局列

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .col-sm-6.利用断点特定的列类来轻松调整列大小，而无需显式编号的类，如.col-sm-6。

Equal-width等宽

For example, here are two grid layouts that apply to every device and viewport, from xs to xxl. 例如，这里有两个网格布局，适用于从xs到xxl的每个设备和视口。Add any number of unit-less classes for each breakpoint you need and every column will be the same width.为每个需要的断点添加任意数量的无单元类，每个列的宽度都相同。

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

Setting one column width设置一个列宽

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. flexbox网格列的自动布局还意味着您可以设置一列的宽度，并使其周围的同级列自动调整大小。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">
<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可变宽度内容

Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.使用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>

Responsive classes响应类

Bootstrap’s grid includes six tiers of predefined classes for building complex responsive layouts. Bootstrap的网格包括六层预定义类，用于构建复杂的响应性布局。Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.在超小型、小型、中型、大型或超大型设备上自定义列的大小，无论您认为合适与否。

All breakpoints所有断点

For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. 对于从最小设备到最大设备的网格相同，请使用.col和.col-*类。Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.当需要特定大小的列时，指定一个编号的类；否则，请随意使用.col。

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

Stacked to horizontal水平堆叠

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).使用一组.col-sm-*类，您可以创建一个基本网格系统，该系统从堆叠开始，在小断点（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>

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">
<!-- 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行列

Use the responsive .row-cols-* classes to quickly set the number of columns that best render your content and layout. 使用响应式的.row cols-*类快速设置最能呈现内容和布局的列数。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. 普通的.col-*类应用于各个列（例如.col-md-4），而行-列类则作为快捷方式设置在父.row上。With .row-cols-auto you can give the columns their natural width.使用.row-cols-auto，可以为列指定其自然宽度。

Use these row columns classes to quickly create basic grid layouts or to control your card layouts.使用这些行-列类可以快速创建基本网格布局或控制卡布局。

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

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

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

You can also use the accompanying Sass mixin, row-cols():您还可以使用附带的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嵌套

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. 要使用默认网格嵌套内容，请在现有的.col-sm-*列中添加一个新的.row和一组.col-sm-*列。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).嵌套行应包含一组最多12列或更少的列（不要求使用所有12个可用列）。

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

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. 使用Bootstrap程序的源Sass文件时，可以选择使用Sass变量和混合来创建自定义、语义和响应页面布局。Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.我们预定义的网格类使用这些相同的变量和混合，为快速响应的布局提供一整套现成的类。

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

Mixins杂合体

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.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();
// 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自定义网格

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. 使用内置的网格Sass变量和映射，可以完全定制预定义的网格类。Change the number of tiers, the media query dimensions, and the container widths—then recompile.更改层数、媒体查询维度和容器宽度，然后重新编译。

Columns and gutters多列和间沟

The number of grid columns can be modified via Sass variables. 可以通过Sass变量修改网格列的数量。$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-columns用于生成每列的宽度（以百分比为单位），而$grid-gutter-width用于设置列左侧列的宽度。

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

Grid tiers网格层

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和$container-max-widths更新为如下内容：

$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. 对Sass变量或映射进行任何更改时，需要保存更改并重新编译。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 %).确保在px中设置网格值（不是rem、em或%）。