Bootstrap的布局体系基于栅格系统构建，通过预定义的CSS类可以快速实现页面元素的排列、对齐和响应式适配，无需开发者手动编写大量定位相关的CSS代码。整个布局系统的核心是将页面水平方向划分为12等份，开发者通过为元素添加对应的栅格类来指定元素占据的列数，配合容器和行组件即可完成基础布局搭建。
Bootstrap布局的核心组件
容器（Container）
容器是所有Bootstrap布局的最外层包裹元素，主要分为两类：.container是固定宽度容器，会根据当前屏幕断点自动调整最大宽度；.container-fluid是流式容器，宽度始终占满父元素的100%。开发者需要根据页面需求选择合适的容器类型，避免布局出现溢出或宽度不符合预期的问题。
行（Row）
行用于在容器中创建水平分组，必须放在容器内使用，且每行默认会清除左右15px的内边距，避免内容直接贴边。行的直接子元素必须是列元素，否则会导致布局错乱。行还提供了.row-cols-*类，可以快速设置每行默认显示的列数，减少重复编写列类的成本。
列（Col）
列是栅格系统的核心，通过.col-*类指定元素占据的栅格份数，所有列的总份数不超过12。如果不指定具体份数，使用.col类会让列自动平分剩余宽度。列还支持偏移、排序等扩展功能，满足不同的排列需求。
响应式断点的应用
Bootstrap预设了6个响应式断点，对应不同的屏幕尺寸范围，开发者可以通过带断点前缀的栅格类实现不同屏幕下的布局适配，断点前缀和对应尺寸如下：
| 断点前缀 | 屏幕尺寸范围 | 适用设备 |
|---|---|---|
| 无前缀 | 小于576px | 超小屏幕手机 |
| sm | 大于等于576px | 小屏幕手机 |
| md | 大于等于768px | 平板设备 |
| lg | 大于等于992px | 小型桌面 |
| xl | 大于等于1200px | 大型桌面 |
| xxl | 大于等于1400px | 超大桌面 |
使用时可以将多个断点类组合，比如.col-12 .col-md-6 .col-lg-4表示在超小屏幕占12列，平板占6列，桌面占4列，实现不同屏幕下的自适应布局。
基础布局示例
以下是一个简单的三列等宽布局示例，在平板及以上屏幕显示三列，手机屏幕显示一列：
<!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.ipipp.com/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-md-4">
<div class="p-3 bg-light border">第一列内容</div>
</div>
<div class="col-12 col-md-4">
<div class="p-3 bg-light border">第二列内容</div>
</div>
<div class="col-12 col-md-4">
<div class="p-3 bg-light border">第三列内容</div>
</div>
</div>
</div>
</body>
</html>
常用布局场景实现
列偏移布局
如果需要让列向右偏移一定的距离，可以使用.offset-*类，比如.offset-md-2表示在中等屏幕及以上向右偏移2列的宽度，示例代码如下：
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="p-3 bg-light border">居中显示的内容块</div>
</div>
</div>
</div>
列排序布局
通过.order-*类可以调整列的显示顺序，数值越小越靠前，默认顺序是0，示例代码如下：
<div class="container">
<div class="row">
<div class="col order-2">
<div class="p-3 bg-light border">第二个显示</div>
</div>
<div class="col order-1">
<div class="p-3 bg-light border">第一个显示</div>
</div>
<div class="col order-3">
<div class="p-3 bg-light border">第三个显示</div>
</div>
</div>
</div>
嵌套布局
列内部可以继续嵌套行和列，实现更复杂的布局结构，嵌套时内部的行会继承父容器的内边距设置，示例代码如下：
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="p-3 bg-light border">
外层第一列
<div class="row">
<div class="col-6">
<div class="p-2 bg-white border">嵌套第一列</div>
</div>
<div class="col-6">
<div class="p-2 bg-white border">嵌套第二列</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="p-3 bg-light border">外层第二列</div>
</div>
</div>
</div>
布局使用注意事项
- 行和列的嵌套层级不要超过3层，否则会增加CSS渲染成本，影响页面性能
- 不要给列添加额外的左右外边距，栅格系统自带的间距已经足够，额外添加会导致布局溢出
- 响应式类的编写顺序建议按照断点从小到大排列，提升代码可读性
- 如果不需要12栅格的划分方式，可以通过自定义Bootstrap的SASS变量修改栅格总份数，适配特殊布局需求
Bootstrapgrid_layoutCSS框架响应式布局修改时间：2026-06-11 13:42:39