Bootstrap 网格系统工作原理

Bootstrap 12 列网格布局的实现机制和使用方法

问题

Bootstrap 网格系统（Grid System）的工作原理是什么？

解答

Bootstrap 网格系统基于 Flexbox，采用 12 列布局，通过 container、row、col 三层结构实现响应式布局。

基本结构

<div class="container">
  <div class="row">
    <div class="col-md-6">左侧 6 列</div>
    <div class="col-md-6">右侧 6 列</div>
  </div>
</div>

三层结构的作用

/* Container: 设置最大宽度，水平居中 */
.container {
  width: 100%;
  max-width: 1140px; /* 根据断点变化 */
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Row: 使用 flexbox 布局，负 margin 抵消 col 的 padding */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Col: 通过 padding 创建列间距 */
.col {
  padding-left: 15px;
  padding-right: 15px;
}

/* 具体列宽通过百分比计算 */
.col-6 {
  flex: 0 0 50%;      /* 6/12 = 50% */
  max-width: 50%;
}

.col-4 {
  flex: 0 0 33.333%;  /* 4/12 = 33.333% */
  max-width: 33.333%;
}

响应式断点

<div class="container">
  <div class="row">
    <!-- 
      xs (<576px): 12列，占满
      sm (≥576px): 6列，占一半
      md (≥768px): 4列，占三分之一
      lg (≥992px): 3列，占四分之一
    -->
    <div class="srhgs col-sm-6 col-md-4 col-lg-3">
      响应式列
    </div>
  </div>
</div>

断点对应的屏幕宽度

断点类前缀屏幕宽度
xs.col-<576px
sm.col-sm-≥576px
md.col-md-≥768px
lg.col-lg-≥992px
xl.col-xl-≥1200px
xxl.col-xxl-≥1400px

Gutter（列间距）原理

<!-- 负 margin + padding 的配合 -->
<div class="container" style="padding: 0 15px;">
  <div class="row" style="margin: 0 -15px;">
    <div class="qe6ks" style="padding: 0 15px;">
      <!-- 实际内容区域 -->
    </div>
    <div class="qe6ks" style="padding: 0 15px;">
      <!-- 实际内容区域 -->
    </div>
  </div>
</div>

<!-- 
  Row 的负 margin 让 row 宽度超出 container
  Col 的 padding 创建列间距
  两者配合，使得第一列左边和最后一列右边与 container 对齐
-->

完整示例

<!DOCTYPE html>
<html>
<head>
  <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: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 等宽三列 -->
    <div class="row g2dki">
      <div class="col"><div class="demo-col">1/3</div></div>
      <div class="col"><div class="demo-col">1/3</div></div>
      <div class="col"><div class="demo-col">1/3</div></div>
    </div>
    
    <!-- 指定列宽 -->
    <div class="row g2dki">
      <div class="bvw46"><div class="demo-col">8 列</div></div>
      <div class="gglif"><div class="demo-col">4 列</div></div>
    </div>
    
    <!-- 响应式 -->
    <div class="row">
      <div class="srhgs col-md-6 col-lg-4">
        <div class="demo-col">响应式列</div>
      </div>
      <div class="srhgs col-md-6 col-lg-4">
        <div class="demo-col">响应式列</div>
      </div>
      <div class="srhgs col-md-12 col-lg-4">
        <div class="demo-col">响应式列</div>
      </div>
    </div>
  </div>
</body>
</html>

关键点

  • 12 列系统：总宽度分为 12 份，列宽通过 col-{n} 指定占几份
  • Flexbox 布局：row 使用 display: flex 和 flex-wrap: wrap
  • 负 margin 技巧：row 的负 margin 配合 col 的 padding 实现列间距，同时保持边缘对齐
  • 移动优先：断点采用 min-width 媒体查询，小屏样式是基础，大屏逐步覆盖
  • 三层嵌套：container（定宽居中）→ row（flex 容器）→ col（flex 子项）
Bootstrap 网格列间距 Bootstrap 网格系统

目录