在网页开发中，创建适应不同屏幕尺寸的布局一直是个挑战。Bootstrap的栅格系统通过一套灵活、强大的网格系统，让我们能够轻松构建出在各种设备上都能完美展示的响应式布局。
栅格系统
Bootstrap栅格系统是一个基于flexbox构建的移动设备优先的响应式网格系统。它将屏幕水平分为12列，通过行（row）和列（column）的组合来创建页面布局，自动适应不同屏幕尺寸。
基本结构
Bootstrap栅格系统由三个核心组成部分：
- 容器（container） ：包裹整个栅格系统的外壳
- 行（row） ：水平分组列
- 列（column） ：实际的内容容器
响应式断点
Bootstrap提供了五个响应式断点：
| 断点 | 尺寸 | 类前缀 | 描述 |
|---|---|---|---|
| xs | <576px | .col- | 超小屏幕（默认） |
| sm | ≥576px | .col-sm- | 小屏幕 |
| md | ≥768px | .col-md- | 中等屏幕 |
| lg | ≥992px | .col-lg- | 大屏幕 |
| xl | ≥1200px | .col-xl- | 超大屏幕 |
| xxl | ≥1400px | .col-xxl- | 超超大屏幕 |
列类命名规则
列类的命名遵循特定模式：.col-{breakpoint}-{number}
breakpoint：断点前缀（sm、md、lg、xl、xxl）number：占据的列数（1-12）
完整代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap栅格系统示例</title>
<!-- 引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.demo-box {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
padding: 15px;
margin-bottom: 15px;
text-align: center;
}
.nested-box {
background-color: #e9ecef;
border: 1px solid #ced4da;
padding: 10px;
}
</style>
</head>
<body>
<div class="container my-5">
<h1 class="text-center mb-4">Bootstrap栅格系统示例</h1>
<!-- 示例1：等宽列 -->
<div class="row mb-4">
<div class="col">
<div class="demo-box">等宽列 1</div>
</div>
<div class="col">
<div class="demo-box">等宽列 2</div>
</div>
<div class="col">
<div class="demo-box">等宽列 3</div>
</div>
</div>
<!-- 示例2：指定列宽 -->
<div class="row mb-4">
<div class="col-4">
<div class="demo-box">col-4 (占4列)</div>
</div>
<div class="col-8">
<div class="demo-box">col-8 (占8列)</div>
</div>
</div>
<!-- 示例3：响应式布局 -->
<div class="row mb-4">
<div class="col-md-6 col-lg-4">
<div class="demo-box">
中屏时占6列，大屏时占4列
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="demo-box">
中屏时占6列，大屏时占4列
</div>
</div>
<div class="col-md-12 col-lg-4">
<div class="demo-box">
中屏时占12列，大屏时占4列
</div>
</div>
</div>
<!-- 示例4：混合宽度与自动宽度 -->
<div class="row mb-4">
<div class="col-3">
<div class="demo-box">固定宽度 (3列)</div>
</div>
<div class="col-auto">
<div class="demo-box">自动宽度 (根据内容)</div>
</div>
<div class="col">
<div class="demo-box">剩余宽度</div>
</div>
</div>
<!-- 示例5：嵌套栅格 -->
<div class="row mb-4">
<div class="col-8">
<div class="demo-box">
外层列 (8列)
<div class="row mt-3">
<div class="col-6">
<div class="nested-box">内层列 (6列)</div>
</div>
<div class="col-6">
<div class="nested-box">内层列 (6列)</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="demo-box">外层列 (4列)</div>
</div>
</div>
<!-- 示例6：列偏移 -->
<div class="row mb-4">
<div class="col-md-4 offset-md-2">
<div class="demo-box">偏移2列，占4列</div>
</div>
<div class="col-md-4">
<div class="demo-box">占4列</div>
</div>
</div>
<!-- 示例7：列排序 -->
<div class="row mb-4">
<div class="col order-3">
<div class="demo-box">第一项 (排在第三)</div>
</div>
<div class="col order-1">
<div class="demo-box">第二项 (排在第一)</div>
</div>
<div class="col order-2">
<div class="demo-box">第三项 (排在第二)</div>
</div>
</div>
<!-- 示例8：垂直对齐 -->
<div class="row mb-4 align-items-center" style="height: 150px; background-color: #e9ecef;">
<div class="col">
<div class="demo-box">垂直居中</div>
</div>
<div class="col align-self-start">
<div class="demo-box">顶部对齐</div>
</div>
<div class="col align-self-end">
<div class="demo-box">底部对齐</div>
</div>
</div>
</div>
<!-- 引入Bootstrap JS（可选，某些组件需要） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
运行结果如下：
🎯 核心要点总结
- 容器→行→列 - 必须按这个顺序嵌套
- 12列网格 - 所有布局都基于12列划分
- 移动优先 - 先设计手机布局，再用
col-md-*、col-lg-*适配大屏幕 - 内容放列里 - 不要在行里直接放内容
- 断点控制响应 - sm(≥576px)、md(≥768px)、lg(≥992px)
