Bootstrap 网格系统基础

Bootstrap 网格系统基于 Flexbox 构建，将页面划分为 12 列，通过响应式断点实现不同屏幕尺寸的布局调整。核心概念包括容器（Container）、行（Row）和列（Column）。

• 容器（Container）：包裹内容的固定宽度或全宽元素，分为 .container（固定宽度）和 .container-fluid（全宽）。
• 行（Row）：.row 类包裹列，确保列正确对齐并清除浮动。
• 列（Column）：.col-* 类定义列的宽度和响应行为，如 .col-md-6 表示中等屏幕下占 6 列。

响应式断点

Bootstrap 提供五种断点，对应不同设备尺寸：

• xs（<576px）
• sm（≥576px）
• md（≥768px）
• lg（≥992px）
• xl（≥1200px）

列类命名规则

列类格式为 .col-{breakpoint}-{width}，例如：

• .col-sm-4：小屏幕及以上占 4 列。
• .col-lg-3：大屏幕及以上占 3 列。

具体案例

案例 1：基础网格布局

<div class="container">
  <div class="row">
    <div class="col-md-4 bg-light p-3">左侧内容</div>
    <div class="col-md-8 bg-info p-3">右侧内容</div>
  </div>
</div>

效果：中等屏幕下左侧占 4 列，右侧占 8 列；小屏幕下堆叠为两行。

案例 2：混合断点布局

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-3 bg-warning p-3">区块 1</div>
    <div class="col-12 col-sm-6 col-lg-3 bg-success p-3">区块 2</div>
    <div class="col-12 col-sm-6 col-lg-3 bg-danger p-3">区块 3</div>
    <div class="col-12 col-sm-6 col-lg-3 bg-primary p-3">区块 4</div>
  </div>
</div>

效果：

• 超小屏幕（xs）：每项占 12 列（堆叠）。
• 小屏幕（sm）：每行两项（各占 6 列）。
• 大屏幕（lg）：每行四项（各占 3 列）。

案例 3：偏移列与嵌套网格

<div class="container">
  <div class="row">
    <div class="col-md-4 offset-md-2 bg-light p-3">偏移 2 列</div>
    <div class="col-md-4 bg-info p-3">
      嵌套网格
      <div class="row">
        <div class="col-6 bg-dark text-white p-2">子列 1</div>
        <div class="col-6 bg-secondary text-white p-2">子列 2</div>
      </div>
    </div>
  </div>
</div>

效果：

• 父级第一列向右偏移 2 列。
• 第二列内嵌套两等分子列。

高级技巧

自动宽度列

使用 .col-{breakpoint} 类让列自动分配宽度：

<div class="row">
  <div class="col-md bg-primary p-3">自动宽度</div>
  <div class="col-md-6 bg-success p-3">固定 6 列</div>
  <div class="col-md bg-primary p-3">自动宽度</div>
</div>

垂直对齐

通过 Flexbox 工具类调整行内列的对齐方式：

<div class="row align-items-center">
  <div class="col bg-light p-3">居中对齐</div>
</div>

排序列

使用 .order-* 类调整列顺序：

<div class="row">
  <div class="col order-2 bg-light p-3">第二顺序</div>
  <div class="col order-1 bg-info p-3">第一顺序</div>
</div>

注意事项

• 行内列的总和不应超过 12，否则会自动换行。
• 未指定断点的列类（如 .col-4）在所有屏幕生效。
• 嵌套网格需包含新的 .row 和 .col-* 结构。