Bootstrap通过12列栅格系统实现响应式布局，使用container、row、col类构建结构，在中等屏幕以上将页面分为8:4两栏，适配多设备显示。
Bootstrap 是一个流行的前端 CSS 框架，它通过响应式栅格系统、预定义类和组件简化网页布局的构建。在实际开发中，使用 Bootstrap 布局可以快速搭建结构清晰、适配多设备的页面。
使用栅格系统进行页面布局
Bootstrap 的核心布局工具是其 12 列栅格系统，它基于 container、row 和 col 三类容器实现灵活的响应式布局。
- container：作为布局的最外层容器，用于居中内容并提供响应式宽度。
- row：必须放在 container 内，用于包裹列（col），通过负边距抵消列的 padding。
- col：实际的内容列，可设置不同屏幕尺寸下的宽度。
示例代码：
主内容区
侧边栏
上面代码在中等及以上屏幕将页面分为 8 列和 4 列，总和为 12，占据整行。
立即学习“前端免费学习笔记（深入）”；
响应式断点与列类命名
Bootstrap 定义了多个响应式断点，可通过不同的类控制各设备下的布局表现：
YIXUNCMS中秋专版2.0.4
下载
系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应
- col-：适用于超小屏（
- col-sm-：小屏（≥576px）
- col-md-：中屏（≥768px）
- col-lg-：大屏（≥992px）
- col-xl-：超大屏（≥1200px）
例如：col-md-6 col-lg-4 表示在中屏占 6 列（一半宽度），在大屏及以上占 4 列（三分之一宽度）。
实用布局技巧
除了基础栅格，还可以结合以下方式优化布局：
- 使用
offset类控制列偏移，如col-md-4 offset-md-2可使元素右移两列。 - 用
d-flex和justify-content实现弹性布局对齐。 - 通过
flex-column在小屏幕上堆叠元素，提升移动端体验。 - 利用
w-100强制换行，模拟传统换行效果。
避免常见问题
使用 Bootstrap 布局时注意：
- 确保
row放在container内，避免水平滚动条。 - 每行的列数总和尽量为 12，否则可能换行或溢出。
- 不要直接对
col设置 width，应使用 Bootstrap 类控制。 - 测试不同屏幕尺寸下的显示效果，确保响应式正常。
基本上就这些。掌握栅格系统和响应式类，就能高效地用 Bootstrap 构建各类页面布局。不复杂但容易忽略细节。
