Bootstrap布局之网格系统

Bootstrap中的网格系统

1、关于网格系统的简单介绍

• 网格系统中的内容需要放置在容器中。
  • 容器一般有两种类， .container和.container-fluid
  • Container 可以规定宽度
  • Container-fluid 默认是全屏大小
• 关于行列关系的介绍
  • 行是列的包装
  • 内容必须放在列中，并且只有列才能作为行的直接子代
  • 我们可以对列进行一些约束，比如大小，比如设备。
  • 我们可以对列的边距进行一些修改。
• 列中的关于设备的不同类
  • Extra small .col-
  • small .col-sm-
  • Medium .col-md-
  • Large .col-lg-
  • Extra Lagre .col-xl-

2、一些关于网格系统的实例

2.1 等宽

网格布局中，每列的宽度都是一致的。

<div class="container border">
  <div class="row border">
    <div class="col border">
      1 of 2
    </div>
    <div class="col border">
      2 of 2
    </div>
  </div>
  <div class="row border">
    <div class="col border">
      1 of 3
    </div>
    <div class="col border">
      2 of 3
    </div>
    <div class="col border">
      3 of 3
    </div>
  </div>
</div>

2.2 等宽多行（分栏符）

我们可以通过插入.w-100来创建跨越多行的等宽列。

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

2.3 设置一行的宽度

自动布局意味着我们可以设置一列的宽度，并且同级列可以自动调整大小。

<!-- 用确定的标签大小来控制div -->
<div class="container border">
    <div class="row border">
        <div class="col border">1 of 3</div>
        <div class="col-6 border">2 of 3 (wider)</div>
        <div class="col border">3 of 3</div>
    </div>
    <div class="row border">
        <div class="col border">1 of 3</div>
        <div class="col-5 border">2 of 3 (wider)</div>
        <