Bootstrap栅格系统采用容器-行-列三层结构，基于12列等分与断点驱动机制，通过Flexbox实现响应式布局，兼顾开发效率与跨设备一致性，但存在语义缺失、定制成本高及旧IE兼容性问题。
一、Bootstrap栅格系统基于容器-行-列的三层嵌套结构
Bootstrap栅格系统通过预定义的类名控制元素在不同视口宽度下的排列与占比，其底层依赖于CSS Flexbox（v4及以后）或浮动（v3）实现布局流。容器（.container 或 .container-fluid）提供响应式宽度约束，行（.row）作为列（.col-*）的直接父容器，负责清除浮动或设置flex上下文，列则通过padding和百分比宽度分配空间。
1、容器层使用max-width配合媒体查询，在xs、sm、md、lg、xl、xxl六个断点处设定不同宽度值，确保内容居中且不随视口无限拉伸。
2、行元素默认设置负外边距（-15px），用于抵消列内建的左右padding（15px），从而保证列内容紧贴边界而不溢出。
3、列通过为每个断点预设的类（如.col-md-6）应用对应百分比宽度，并结合flex属性实现自动换行与等分布局。
二、栅格系统采用12列等分与断点驱动的宽度分配机制
所有列宽以12为基数进行划分，例如.col-lg-4表示在lg及以上断点占据4/12即1/3宽度；未指定断点的类（如.col-6）作用于所有尺寸，而高断点类会覆盖低断点类，形成移动优先的覆盖逻辑。
1、每个断点对应一组媒体查询最小宽度值，如md为768px，lg为992px，xl为1200px，xxl为1400px。
2、列类名中的数字代表该列在12列网格中所占份数，系统通过calc()函数或固定百分比计算实际宽度，如.col-sm-8生成width: 66.666667%。
3、当一行内列数总和超过12时，多余列将自动换行至下一行，无需额外换行标记。
三、响应式布局优点体现为开发效率与跨设备一致性
开发者可复用标准化类名快速构建适配多端的界面结构，避免重复编写媒体查询与布局逻辑，大幅缩短前端实现周期。
1、内置断点与类名体系降低响应式学习门槛，新手可不经深入CSS即可产出基础响应效果。
2、统一的间距规则（如.g-3统一设置gap为1rem）保障组件间视觉节奏一致。
3、栅格类支持响应式堆叠（如.col-12.col-md-6），使同一HTML结构在不同设备上呈现合理布局形态。
四、响应式布局缺点集中于语义缺失与定制成本升高
过度依赖预设类名易导致HTML结构中混入大量表现层信息，削弱语义化程度，影响可访问性与SEO表现。
1、栅格类名（如.col-lg-8）无法传达内容层级或功能意图，屏幕阅读器难以解析其结构意义。
2、定制主题需覆盖大量SCSS变量与类名，修改断点或列数需重编译源码，脱离CDN直引后维护复杂度上升。
3、Flexbox布局下部分旧版IE兼容性受限，.row需额外处理min-height与flex-wrap行为以避免高度塌陷。
五、栅格系统依赖CSS自定义属性与Sass变量实现灵活配置
Bootstrap v5起引入CSS自定义属性（如--bs-gutter-x）替代部分Sass变量，使运行时动态调整成为可能，同时保留Sass源码供深度定制。
1、核心栅格参数（$grid-columns、$grid-gutter-width、$grid-breakpoints）均定义于_variables.scss中，支持项目级覆盖。
2、.col类本质是通过@each循环生成的占位符选择器，最终输出为带媒体查询的width/flex属性组合。
3、启用RTL模式时，系统自动翻转float、text-align及padding方向，但需手动确保内容语言属性正确设置为dir="rtl"。
