bootstrap网格默认12列因其可被1、2、3、4、6整除，便于常见布局；col-*依赖预设计算逻辑，不可随意修改$grid-columns；响应式断点需按需选用col-或带前缀类；row必须嵌套于container中抵消负边距；自定义断点需确保$grid-breakpoints包含对应键名。
Bootstrap网格系统为什么默认12列
因为12能被1、2、3、4、6整除，方便做等分、三七开、二八分这类常见布局。你改不了它——col-*类名底层依赖预设的12等分计算逻辑，强行覆盖$grid-columns变量会波及所有断点和组件，得不偿失。
实操建议：
– 用col-6占半宽、col-4占三分之一、col-3占四分之一，别硬套像素值
– 需要非12整除比例（比如5列）？改用col（自动等宽）或flex手动设flex: 0 0 20%
– 别在col上直接写width，会和padding、box-sizing冲突导致溢出
移动端优先时，col-sm-6和col-6到底差在哪
col-6从最小屏幕（xs）就开始生效；col-sm-6只在≥576px才触发，更小屏幕会退化为col-12（整行）。这不是“多写个sm就更高级”，而是响应断点的实际控制权问题。
常见错误现象：
– 页面在手机上看变成单列堆叠，但预期是双列——其实是用了col-md-6却忘了补col-6
– 某些设备上列宽忽大忽小——混用了col-6和col-lg-4没对齐断点层级
– 使用场景：后台管理页常全尺寸保持多列，就全用col-；营销页需手机单列+平板双列，就用col-12 col-md-6
为什么加了row还是不对齐，甚至出现横向滚动条
根本原因是row自带margin-left: -15px和margin-right: -15px，必须嵌套在container或container-fluid里才能抵消。裸放row会导致负边距外溢，触发父容器滚动条。
容易踩的坑：
– 把row直接扔在body下，尤其配合position: fixed时更明显
– 在row里又套row却不加container，嵌套负边距层层放大
– 示例修正：
<div class="container"> <br><div class="row"> <br><div class="col-6">左</div> <br><div class="col-6">右</div> <br> </div> <br> </div>
自定义断点后col-xl-3失效怎么办
Bootstrap 5默认断点是xs/sm/md/lg/xl/xxl，但如果你改了Sass变量$grid-breakpoints删了xl，编译后的CSS里压根没有col-xl-*类——浏览器自然忽略它，元素按display: block回退成单列。
解决路径：
– 查bootstrap/scss/_variables.scss确认$grid-breakpoints是否含xl
– 用浏览器开发者工具检查元素，看class是否存在对应样式规则
– 兼容性影响：删断点省不了多少体积，反而增加维护成本；真要精简，优先砍xxl而非xl（后者仍被大量平板使用）
网格系统不是万能胶，它解决的是“行列对齐”这个具体问题。一旦涉及复杂重排（比如卡片高度不一导致的错位）、跨区域合并（类似Excel的合并单元格），就得切到grid或flex，别硬塞col。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
