希望你之前已经阅读过 Flexbox 简介 理论，让我们更深入地了解一下 Rows。

¥In the hope that you’ve previously read the Introduction to Flexbox theory, let’s get deeper into Rows.

对于等宽列，使用断点特定的列类。为每个所需的断点添加任意数量的无单位类，这样每列的宽度都会相同。

¥Utilize breakpoint-specific column classes for equal-width columns. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

等宽(Equal-width)

¥Equal-width

例如，这里有两个适用于所有设备和视口（从 xs 到 xl）的网格布局。

¥For example, here are two grid layouts that apply to every device and viewport, from xs to xl.

设置一列宽度(Setting one column width)

¥Setting one column width

弹性框网格列的自动布局还意味着你可以设置一列的宽度，其他列将自动围绕该列调整大小。你可以使用预定义的网格类（如下所示）或内联宽度。请注意，无论中心列的宽度是多少，其他列的大小都会调整。

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

可变宽度内容(Variable width content)

¥Variable width content

使用 col-{breakpoint}-auto 类，列可以根据其内容的自然宽度调整大小。这对于输入、数字等单行内容非常方便（请参阅本页的最后一个示例）。这与水平对齐类结合使用，对于在视口宽度变化时使列大小不均匀的布局居中非常有用。

¥Using the col-{breakpoint}-auto classes, columns can size itself based on the natural width of its content. This is super handy with single line content like inputs, numbers, etc (see last example on this page). This, in conjunction with horizontal alignment classes, is very useful for centering layouts with uneven column sizes as viewport width changes.

响应式类(Responsive classes)

¥Responsive classes

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

¥The grid includes five 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)

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

水平堆叠(Stacked to horizontal)

¥Stacked to horizontal

结合使用 .col-12 和 .col-md-* 类，你可以创建一个基本的网格系统，该系统最初在小型设备上堆叠显示，然后在桌面（中型）设备上变为水平显示。

¥Using a combination of .col-12 and .col-md-* classes, you can create a basic grid system that starts out stacked on small devices before becoming horizontal on desktop (medium) devices.

混合搭配(Mix and match)

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

对齐(Alignment)

¥Alignment

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

¥Use flexbox alignment utilities to vertically and horizontally align columns.

列换行(Column wrapping)

¥Column wrapping

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

¥If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

重新排序(Reordering)

¥Reordering

偏移列(Offsetting columns)

¥Offsetting columns

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

¥Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

嵌套(Nesting)

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

Flex Playground(Flex Playground)

要查看 Flex 的实际运行情况，你可以使用 Flex Playground 以交互方式了解更多信息。

¥To see the Flex in action, you can use the Flex Playground to interactively learn more.