响应式布局是现代网页开发的基础需求，Bootstrap 的栅格系统提供了一套简单高效的方式来实现跨设备适配。通过预定义的类名结构，开发者可以快速搭建出在手机、平板、桌面等不同屏幕尺寸下都能良好显示的页面布局。
理解 Bootstrap 栅格系统的基本结构
Bootstrap 栅格基于 12 列设计，支持多种响应断点。每一行（.row）包含最多 12 列，列通过 .col-* 类控制宽度。常见的断点前缀包括：
- col-：超小屏（
- col-sm-：小屏（≥576px）
- col-md-：中屏（≥768px）
- col-lg-：大屏（≥992px）
- col-xl-：超大屏（≥1200px）
使用时将内容放在 .container 或 .container-fluid 中，再用 .row 包裹列元素。
快速创建响应式布局示例
以下是一个三栏布局，在桌面端平均分布，在移动端堆叠显示：
立即学习“前端免费学习笔记（深入）”；
<div class="container">
<div class="row">
<div class="col-md-4">左侧内容</div>
<div class="col-md-4">中间内容</div>
<div class="col-md-4">右侧内容</div>
</div>
</div>
这里使用了 col-md-4，表示从中等屏幕开始每列占 4/12（即 1/3 宽度），在更小屏幕上自动堆叠为全宽。
灵活运用偏移与嵌套提升布局能力
栅格系统还支持列偏移和嵌套，进一步增强布局灵活性：
- 使用 .offset-md-* 实现列左侧留白，比如 offset-md-2 可使元素右移两列
- 在 .col-* 内部再添加 .row 和子列，实现复杂嵌套结构
- 混合不同断点类实现精细化控制，如 col-sm-6 col-lg-3
例如居中一个 6 列宽度的区域：<div class="col-md-6 offset-md-3">居中内容</div>
基本上就这些。只要掌握栅格的断点规则和类命名逻辑，就能快速构建适配各类设备的页面结构，无需从零写媒体查询。注意避免列数超过 12，否则会换行影响布局。合理利用容器、行和列的层级关系，能大幅提升开发效率。
