Bootstrap v4 栅格系统简介

Bootstrap 的栅格系统是其核心布局组件，允许我们快速创建响应式网页布局。栅格系统基于行（row）和列（column）的概念，通过灵活使用这些组件，我们可以轻松实现不同屏幕尺寸下的页面布局。

1. 基本概念

在 Bootstrap v4 中，一个栅格系统主要由容器（Container）、行（Row）和列（Column）组成。

容器（Container）：用于包裹整个页面内容，提供响应式宽度。
行（Row）：水平方向上的布局容器，用于放置列。
列（Column）：垂直方向上的布局单元，用于放置具体内容。

2. 使用方法

2.1 创建容器

使用 .container 或 .container-fluid 类来创建一个容器。.container 类提供了固定的最大宽度，而 .container-fluid 类则会使容器宽度始终为 100%。

<!-- 固定宽度的容器 -->  
  <div class="container">
    <!-- 内容 -->
  </div>
    <!-- 全宽度的容器 -->
  <div class="container-fluid">
    <!-- 内容 -->
  </div>

2.2 创建行

在容器内部，使用 .row 类来创建一个行。

<div class="container">
    <div class="row">
      <!-- 列将在这里 -->
    </div>
  </div>

2.3 创建列

在行内部，使用 .col-* 类来创建列。其中 * 可以是 1 到 12 的数字，代表该列在栅格系统中占据的格数。也可以使用 .col-sm-*、.col-md-*、.col-lg-*、.col-xl-* 来为不同屏幕尺寸定义不同的列宽。

<div class="container">
    <div class="row">
      <div class="col-4">我是 3 列宽的列</div>
      <div class="col-8">我是 9 列宽的列</div>
    </div>
  </div>

在这个例子中，我们创建了一个包含两列的行。第一列使用了 .col-4 类，占据了栅格系统的 4 列宽度；第二列使用了 .col-8 类，占据了栅格系统的 8 列宽度。由于 Bootstrap 的栅格系统默认是 12 列，所以这两列加起来正好填满整个行。

3. 响应式布局

Bootstrap 的栅格系统还提供了响应式布局的支持。通过添加不同的前缀（如 .col-sm-、.col-md- 等），我们可以为不同屏幕尺寸定义不同的列宽。这样，当屏幕尺寸发生变化时，页面布局也会自动调整。


<div class="container">
    <div class="row">
      <div class="col-12 col-md-6">在小屏幕上我占据全宽，但在中等屏幕及以上我只占据半宽</div>
      <div class="col-12 col-md-6">同样，在小屏幕上我占据全宽，但在中等屏幕及以上我只占据半宽</div>
    </div>
  </div>

在这个例子中，当屏幕尺寸较小时（小于 768px），两个列都会占据全宽；当屏幕尺寸达到中等大小时（大于等于 768px），两个列会各占据一半的宽度。

4. 自动填充和均等分割

Bootstrap 还提供了 .col 和 .col-auto 类来实现列的自动填充和均等分割。


<div class="container">
    <div class="row">
      <div class="col-auto">这个列会自动调整宽度以适应内容</div>
      <div class="col">这个列会均等分割剩余空间</div>
    </div>
  </div>

在这个例子中，第一个列使用了 .col-auto 类，它会根据内容自动调整宽度；第二个列使用了 .col 类，它会均等分割剩余的空间。

5. 偏移和嵌套

Bootstrap 还提供了列的偏移和嵌套功能，可以通过 .offset-* 和 .row 类来实现。


<div class="container">
    <div class="row">
      <div class="col-4">没有偏移的列</div>
      <div class="col-4 offset-4">偏移了 4 列的列</div>
    </div>
    <div class="row">
        <div class="col-6">
            <div class="row">
                <div class="col-12">嵌套的行和列</div>
            </div>
        </div>
        <div class="col-6">另一个列</div>
    </div> 
</div>

在这个例子中，第二个列使用了 .offset-4 类，它会向右偏移 4 列的宽度。在嵌套的例子中，我们在一个列内部又创建了一个新的行，并在该行内部放置了一个列。这种嵌套的方式允许我们创建更复杂的布局结构。

6. 总结

Bootstrap 的栅格系统是一个强大且灵活的工具，它允许我们快速创建响应式布局。通过合理使用容器、行和列，并结合不同的类来实现响应式布局、自动填充、均等分割、偏移和嵌套等功能，我们可以轻松构建出美观且适应各种屏幕尺寸的网页。希望这篇教程能帮助你更好地理解和使用 Bootstrap v4 的栅格系统。

除此之外，你还可以使用我们的在线低代码网页制作工具，5分钟完成页面制作：https://htmlpage.cn.