Bootstrap Grid system [布局：栅格系统]

Bootstrap 栅格系统（Grid System）

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

运行示例

Bootstrap的网格系统使用一系列容器，行和列来布局和对齐内容。它是使用flexbox构建的，具有完全的响应能力。下面是一个示例，并深入研究了网格如何组合在一起。

三列之一	三列之一	三列之一

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

工作原理

• 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）；
• 使用行来创建列的水平组；
• 内容应该放置在列内，且唯有列可以是行的直接子元素；
• 预定义的栅格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局；
• 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移；
• 栅格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4；

栅格选项

下表总结了 Bootstrap 栅格系统如何跨多个设备工作：

自动布局列

利用特定于断点的列类来简化列大小，而无需使用类似的显式编号类.col-sm-6。

等宽

例如，以下是两个网格布局，从xs到分别应用于每个设备和视口xl。为所需的每个断点添加任意数量的无单元类，每列的宽度将相同。

1之2	2之2

1之3	2之3	3之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>

等宽多行

通过插入一个.w-100实现列换行，来创建跨多行的等宽列。通过.w-100与一些响应性显示实用程序混合使用，使响应具有响应性。

同	同
同	同

<div class="container">
  <div class="row">
    <div class="col">coldiv>
    <div class="col">coldiv>
    <div class="w-100">div>
    
    <div class="col">coldiv>
    <div class="col">coldiv>
  div>
div>

设置一列宽度

Flexbox网格列的自动布局还意味着您可以设置一列的宽度，并使同级列在其周围自动调整大小。您可以使用预定义的网格类（如下所示），网格混合或内联宽度。请注意，无论中间列的宽度如何，其他列都会调整大小。

<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类可根据其内容的自然宽度来调整列的大小。

<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

行列

使用响应式.row-cols-*类来快速设置最能呈现内容和布局的列数。普通.col-*类适用于各个列（例如.col-md-4），而行列类在父级上设置.row为快捷方式。

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

Column	Column
Column	Column

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Columndiv>
    <div class="col">Columndiv>
    <div class="col">Columndiv>
    <div class="col">Columndiv>
  div>
div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Columndiv>
    <div class="col">Columndiv>
    <div class="col">Columndiv>
    <div class="col">Columndiv>
  div>
div>

Column	Column	Column	Column

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Columndiv>
    <div class="col">Columndiv>
    <div class="col">Columndiv>
    <div class="col">Columndiv>
  div>
div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Columndiv>
    <div class="col">Columndiv>
    <div class="col-6">Columndiv>
    <div class="col">Columndiv>
  div>
div>

您还可以使用随附的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);
  }
}

对准

垂直对齐

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

水平对齐

<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

可以使用删除预定义网格类别中列之间的间距.no-gutters。这会从所有直接子列中删除负数margins .row并padding从所有直属子列中删除水平数。

这是用于创建这些样式的源代码。请注意，列替代仅适用于第一个子列，并通过属性选择器定位。尽管这会生成更具体的选择器，但仍可以使用interval实用程序进一步自定义列填充。

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

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

实际上，这是它的外观。请注意，您可以继续将其与所有其他预定义的网格类（包括列宽，响应层，重新排序等）一起使用。

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8div>
  <div class="col-6 col-md-4">.col-6 .col-md-4div>
div>

Column Wrapping

如果在一行中放置超过12列，则每组额外的列将作为一个单元包装到新行上。

<div class="container">
  <div class="row">
    <div class="col-9">.col-9div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 > 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>
div>

Reordering

Order classes

使用.order-类来控制内容的视觉顺序。这些类是响应式的，因此您可以order按断点设置（例如.order-1.order-md-2）。包括支持1通过12所有五格层。

First in DOM, no order applied	Third in DOM, with an order of 1	Second in DOM, with a larger order

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    div>
    <div class="col order-12">
      Second in DOM, with a larger order
    div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    div>
  div>
div>

也有响应式.order-first和.order-last类分别order通过应用order: -1和order: 13（order: $columns + 1）来更改元素的。这些类也可以.order-* 根据需要与编号的类混合。

Third in DOM, ordered first	Second in DOM, unordered	First in DOM, ordered last

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    div>
    <div class="col">
      Second in DOM, unordered
    div>
    <div class="col order-first">
      Third in DOM, ordered first
    div>
  div>
div>

Offsetting columns

您可以通过两种方式来抵消网格列：我们的响应.offset-网格类和利润工具。网格类的大小可匹配列，而边距对于偏移宽度可变的快速布局更有用。

Offset classes

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

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4div>
  div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3div>
  div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3div>
  div>
div>

除了在响应断点处清除列外，您可能还需要重置偏移量。请参见网格示例中的实际操作。

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6div>
    <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-0div>
  div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6div>
    <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-0div>
  div>
div>

Margin utilities

随着v4中向flexbox的迁移，您可以使用margin实用程序，例如，.mr-auto将同级列强制彼此分开。

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-autodiv>
  div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-autodiv>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-autodiv>
  div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-autodiv>
    <div class="col-auto">.col-autodiv>
  div>
div>

Nesting

要将内容与默认网格嵌套，请在现有列中添加新列.row和一组列。嵌套行应包括一组总计不超过12个或更少的列（不需要全部使用12个可用列）。.col-sm-* .col-sm-*

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

Variables

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

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

参考文献：
https://www.runoob.com/bootstrap/bootstrap-grid-system.html
https://v4.bootcss.com/docs/layout/grid/#responsive-classes