17370845950

响应式布局是现代网页开发的基础需求，Bootstrap 的栅格系统提供了一套简单高效的方式来实现跨设备适配。通过预定义的类名结构，开发者可以快速搭建出在手机、平板、桌面等不同屏幕尺寸下都能良好显示的页面布局。

理解 Bootstrap 栅格系统的基本结构

Bootstrap 栅格基于 12 列设计，支持多种响应断点。每一行（.row）包含最多 12 列，列通过 .col-* 类控制宽度。常见的断点前缀包括：

• col-：超小屏（
• col-sm-：小屏（≥576px）
• col-md-：中屏（≥768px）
• col-lg-：大屏（≥992px）
• col-xl-：超大屏（≥1200px）

使用时将内容放在 .container 或 .container-fluid 中，再用 .row 包裹列元素。

快速创建响应式布局示例

以下是一个三栏布局，在桌面端平均分布，在移动端堆叠显示：

  
    左侧内容
    中间内容
    右侧内容
  

这里使用了 col-md-4，表示从中等屏幕开始每列占 4/12（即 1/3 宽度），在更小屏幕上自动堆叠为全宽。

灵活运用偏移与嵌套提升布局能力

栅格系统还支持列偏移和嵌套，进一步增强布局灵活性：

• 使用 .offset-md-* 实现列左侧留白，比如 offset-md-2 可使元素右移两列
• 在 .col-* 内部再添加 .row 和子列，实现复杂嵌套结构
• 混合不同断点类实现精细化控制，如 col-sm-6 col-lg-3

例如居中一个 6 列宽度的区域：
居中内容

基本上就这些。只要掌握栅格的断点规则和类命名逻辑，就能快速构建适配各类设备的页面结构，无需从零写媒体查询。注意避免列数超过 12，否则会换行影响布局。合理利用容器、行和列的层级关系，能大幅提升开发效率。