Bootstrap列宽类名应按像素断点（如sm:576px、md:768px）选择而非设备型号；必须显式声明各断点类（如col-12 col-sm-6 col-lg-3），确保小屏到大屏响应连贯；列总和≤12且须嵌套于.row中，否则错位或间隙异常。
Bootstrap 列宽类名怎么选，看断点不是看设备型号
bootstrap 的列宽不是靠“手机/平板/电脑”这种模糊分类决定的，而是严格按 css 媒体查询的像素断点触发。写错断点类名，比如在小屏上用 col-md-3，结果就是文字挤成一团、列不换行、甚至横向滚动条出现。
Bootstrap 5 默认断点是：sm:576px、md:768px、lg:992px、xl:1200px、xxl:1400px。这意味着：col-md-6 只在视口宽度 ≥768px 时生效，小于它就回退到没写该类的状态（比如只写了 col-md-6，那在手机上会默认占满整行）。
- 别凭感觉写
col-lg-4就以为“大屏四栏”，先查你目标用户真实访问设备的宽度分布（例如 iPad 横屏是 768px，刚好卡在md起点，不是lg） - 如果只写一个断点类（如
col-xl-3），小屏下不会自动降级——必须显式补上更小断点，比如col-12 col-sm-6 col-xl-3 -
col-（无后缀）是“超小屏专属”，对应max-width: 575.98px，不是“所有屏幕都生效”
常见错误：列数加起来超过12，或漏写 .row
Bootstrap 栅格要求每行子元素的列数总和 ≤12，否则会强制换行、错位。比如写了两个 col-md-8，加起来是 16，第二列就会掉到下一行，且左侧留白。这不是 bug，是栅格系统设计行为。
另一个高频问题是直接把 .col-* 放在 .container 或 body 下，没包 .row。Bootstrap 的 .row 提供负 margin 抵消 .col-* 的 padding，漏掉它，列之间会出现双倍间隙，或者左右溢出。
- 检查是否每个
.col-*都嵌套在.row内，且.row在.container或.container-fluid中 - 用浏览器开发者工具检查元素 computed styles，看
margin-left/right是否为负值（正常应为 -0.75rem） - 列数总和超 12 时，不要硬调
flex-wrap: nowrap，而是改类名，比如把col-md-8 col-md-8拆成col-md-6 col-md-6再加个col-md-12放下方内容
移动端单列但桌面端多列，必须写全断点链
想实现“手机竖排 → 平板双栏 → 大屏四栏”，不能只写 col-xl-3，也不能只写 col-md-6。必须显式写出从最小屏到最大屏的完整链，否则中间断点会失效。
推荐写法：col-12 col-sm-6 col-lg-3。含义是：
-
col-12：≤575.98px → 单列占满 -
col-sm-6：≥576px → 每行两列（50%） -
col-lg-3：≥992px → 每行四列（25%）
注意：这里跳过了 md，因为 sm-6 在 768px 时仍有效，直到 lg 断点覆盖它。这种“跳跃式写法”是合法且常见的，只要逻辑连贯。
容易被忽略的是：如果某列内容特别长（比如地址、长链接），小屏下可能撑破容器。此时要加 text-wrap 或对特定子元素设 word-break: break-word，而不是指望栅格自动截断。
container-fluid 和 container 对列宽的影响
.container 有固定 max-width（如 lg 是 992px），而 .container-fluid 是 100% 宽度。这直接影响内部 .col-* 的实际渲染宽度——不是百分比失效，而是父容器本身变窄了。
比如在 1920px 屏幕下，.container 最宽只有 1140px（xl 断点），里面 col-xl-3 实际宽度 ≈ 285px；而 .container-fluid 下同样类名会接近 480px。如果你需要页脚或 banner 全宽，又希望列数响应式，优先用 .container-fluid + .row + .col-* 组合，别套一层 .container。
- 用
.container时，若需页脚也对齐正文宽度，可加px-0清除左右 padding，再手动控制内边距 - 别给
.container或.row设width/max-width，会干扰断点计算 - 测试时务必用真机或 Chrome DevTools 的 device toolbar 模拟，单纯缩放浏览器窗口可能不触发断点
