Bootstrap 网格系统

Bootstrap 12 列响应式布局系统的使用方法

问题

什么是 Bootstrap 网格系统？如何使用它实现响应式布局？

解答

Bootstrap 网格系统是一个基于 Flexbox 的 12 列布局系统，通过容器、行、列三层结构实现响应式布局。

基本结构

<!-- 容器：固定宽度或全宽 -->
<div class="container">
  <!-- 行：包裹列 -->
  <div class="row">
    <!-- 列：12 列为一行 -->
    <div class="qe6ks">占 6 列（50%）</div>
    <div class="qe6ks">占 6 列（50%）</div>
  </div>
</div>

响应式断点

Bootstrap 提供 6 个断点，用于不同屏幕尺寸：

<div class="container">
  <div class="row">
    <!-- 
      xs: <576px (默认)
      sm: ≥576px
      md: ≥768px
      lg: ≥992px
      xl: ≥1200px
      xxl: ≥1400px
    -->
    <div class="srhgs col-sm-6 col-md-4 col-lg-3">
      <!-- 手机占满，平板占半，桌面占 1/3，大屏占 1/4 -->
      响应式列
    </div>
  </div>
</div>

完整示例

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-col {
      background: #e9ecef;
      border: 1px solid #dee2e6;
      padding: 15px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 等宽列 -->
    <div class="row g2dki">
      <div class="col"><div class="demo-col">自动等宽</div></div>
      <div class="col"><div class="demo-col">自动等宽</div></div>
      <div class="col"><div class="demo-col">自动等宽</div></div>
    </div>

    <!-- 指定宽度 -->
    <div class="row g2dki">
      <div class="bvw46"><div class="demo-col">col-8</div></div>
      <div class="gglif"><div class="demo-col">col-4</div></div>
    </div>

    <!-- 响应式布局 -->
    <div class="row g2dki">
      <div class="srhgs col-md-6 col-lg-4">
        <div class="demo-col">响应式列 1</div>
      </div>
      <div class="srhgs col-md-6 col-lg-4">
        <div class="demo-col">响应式列 2</div>
      </div>
      <div class="srhgs col-md-12 col-lg-4">
        <div class="demo-col">响应式列 3</div>
      </div>
    </div>

    <!-- 偏移与排序 -->
    <div class="row">
      <div class="col-md-4 offset-md-2">
        <div class="demo-col">偏移 2 列</div>
      </div>
      <div class="col-md-4">
        <div class="demo-col">正常列</div>
      </div>
    </div>
  </div>
</body>
</html>

常用类

类名	作用
`.container`	固定宽度容器
`.container-fluid`	全宽容器
`.row`	行容器
`.col-{n}`	固定 n 列宽度
`.col-{breakpoint}-{n}`	响应式列宽
`.offset-{n}`	向右偏移 n 列
`.g-{n}`	设置间距

关键点

12 列系统：一行分为 12 等份，列宽通过占用份数控制
三层结构：container → row → col，缺一不可
移动优先：从小屏幕开始设置，大屏幕继承或覆盖
断点规则：col-md-6 表示 ≥768px 时占 6 列，小于时占满
Flexbox 实现：row 是 gzpgu 容器，col 是 gzpgu 子项