上一节:

  Bootstrap 网格示例

  • 三列相等

    在指定数量的元素上使用 .col 类，Bootstrap 将识别出有多少个元素（并创建等宽列）。
    在下面的示例中，我们使用三个 col 元素，每个元素的宽度为 33.33％。 
    <div class="container-fluid">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>
    尝试一下
    输出结果如下：
    col
    col
    col
    您也可以使用数字来控制列宽；只需确保总和等于或少于12（不需要使用所有12个可用列）： 
    <div class="container-fluid">
  <div class="row">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>
</div>
    尝试一下
    运行输出的结果跟上面的示例输出结果一样

  • 三列不相等

    要创建不相等的列，您必须使用数字。
    以下示例将创建 25％/50％/25％ 的拆分： 
    <div class="container-fluid">
  <div class="row">
    <div class="col-3">col-3</div>
    <div class="col-6">col-6</div>
    <div class="col-3">col-3</div>
  </div>
</div>
    尝试一下
    输出结果如下：
    col-3
    col-6
    col-3
    但是，仅设置一列的宽度就足够了，并使同级列自动在其周围调整大小；以下示例将创建 25％/50％/25％ 的拆分： 
    <div class="container-fluid">
  <div class="row">
    <div class="col">col</div>
    <div class="col-6">col-6</div>
    <div class="col">col</div>
  </div>
</div>
    尝试一下
    运行输出的结果跟上面的示例输出结果一样

  • 更多相等的列

    以下示例演示了更多相等的列的布局： 
    <！-2列相等->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>
<！-4列相等->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>
<！-6列相等->
<div class="row">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>
    尝试一下
    输出结果如下：
    1 of 2
    2 of 2
    1 of 4
    2 of 4
    3 of 4
    4 of 4
    1 of 6
    2 of 6
    3 of 6
    4 of 6
    5 of 6
    6 of 6

  • 行列

    您还可以使用 .row-cols-* 类来控制应相邻显示的列数（与cols无关）： 
    <div class="row row-cols-1">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>
<div class="row row-cols-3">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>
    尝试一下
    输出结果如下：
    1 of 2
    2 of 2
    1 of 4
    2 of 4
    3 of 4
    4 of 4
    1 of 6
    2 of 6
    3 of 6
    4 of 6
    5 of 6
    6 of 6

  • 更多不相等的列

    以下示例演示了更多不相等的列的布局： 
    <！-2列不相等->
<div class="row">
  <div class="col-8">1 of 2</div>
  <div class="col-4">2 of 2</div>
</div>
<！-4列不相等->
<div class="row">
  <div class="col-2">1 of 4</div>
  <div class="col-2">2 of 4</div>
  <div class="col-2">3 of 4</div>
  <div class="col-6">4 of 4</div>
</div>
<！设置两个列宽->
<div class="row">
  <div class="col-4">1 of 4</div>
  <div class="col-6">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>
    尝试一下
    输出结果如下：
    1 of 2
    2 of 2
    1 of 4
    2 of 4
    3 of 4
    4 of 4
    1 of 4
    2 of 4
    3 of 4
    4 of 4

  • 相等的高

    如果其中一列比另一列高（由于文本或CSS高度），其余列将遵循： 
    <div class="row">
  <div class="col">
     相等的高其余列将遵循...
  </div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
    尝试一下
    输出结果如下：
    相等的高其余列将遵循相等的高其余列将遵循相等的高其余列将遵循相等的高其余列将遵循相等的高其余列将遵循相等的高其余列将遵循相等的高其余列将遵循相等的高其余列将遵循相等的高其余列将遵循相等的高其余列将遵循
    col
    col

  • 嵌套列

    以下示例显示了如何创建两列布局，其中两列之一中包含另外两列： 
    <div class="row">
  <div class="col-8">
    .col-8
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>
  <div class="col-4">.col-4</div>
</div>
    尝试一下
    输出结果如下：
    .col-8
    .col-6
    .col-6
    .col-4

  • 响应式类

    Bootstrap 网格系统具有五类：
    • .col-（超小型设备-屏幕宽度<576px）
    • .col-sm-（小型设备-屏幕宽度>=576px）
    • .col-md-（中等设备-屏幕宽度>=768px）
    • .col-lg-（大型设备-屏幕宽度>=992px）
    • .col-xl-（超大型设备-屏幕宽度>=1200px）
    可以将上述类组合在一起以创建更多动态和灵活的布局。
    提示：每个类都按比例增加，因此，如果您希望为 sm 和 md 设置相同的宽度，则只需指定 sm。
    以下示例显示了如何创建一个列布局，该列布局开始于堆叠在超小型设备上，然后在大型设备（sm，md，lg和xl）上变为水平： 
    <div class="row">
  <div class="col-sm-9">col-sm-9</div>
  <div class="col-sm-3">col-sm-3</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>
    尝试一下
    输出结果如下：
    col-sm-9
    col-sm-3
    col-sm
    col-sm
    col-sm

  • 更多网格类

    以下示例演示了各个设备屏幕大小的分配： 
    <！-在超小型设备上分配50％/50％，在较大设备上分配75％/25％->
<div class="row">
  <div class="col-6 col-sm-9">col-6 col-sm-9</div>
  <div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>

<！-超小型，中小型设备的分配比例为58％/42％，大型和超大型设备的分配比例为66.3％/33.3％->
<div class="row">
  <div class="col-7 col-lg-8">col-7 col-lg-8</div>
  <div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>

<！-在小型设备上分配了25％/75％，在中型设备上分配了50％/50％，在大型和超大型设备上分配了33％/66％。 
在超小型设备上，它将自动堆叠（100％）->
<div class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
  <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>
    尝试一下
    将 .no-gutters 类添加到 .row 容器中以删除多余的空间： 
    <div class="row no-gutters">
  <div class="col-3 bg-success">删除多余的空间贴近边缘</div>
  <div class="col-9 bg-warning">删除多余的空间贴近边缘</div>
</div>
    尝试一下
    输出结果如下：
    删除多余的空间贴近边缘删除多余的空间贴近边缘删除多余的空间贴近边缘删除多余的空间贴近边缘删除多余的空间贴近边缘删除多余的空间贴近边缘删除多余的空间贴近边缘删除多余的空间贴近边缘删除多余的空间贴近边缘
    删除多余的空间贴近边缘删除多余的空间贴近边缘删除多余的空间贴近边缘删除多余的空间贴近边缘删除多余的空间贴近边缘删除多余的空间贴近边缘删除多余的空间贴近边缘删除多余的空间贴近边缘删除多余的空间贴近边缘
上一节: