用 col-12 col-md-3 即可实现：移动端 1 列、桌面端 4 列；因 col-12 适配所有尺寸，col-md-3 在 ≥768px（中等屏及以上）生效，4 个共占 12 列，且 md 断点是官方推荐的桌面起始点，兼顾主流笔记本与大屏手机竖屏。
如何用 Bootstrap 4/5 的栅格类实现桌面端 4 列、移动端 1 列
直接用 col-12 col-md-3 就行。bootstrap 的栅格系统按断点分层，col-12 覆盖所有尺寸（包括移动端），col-md-3 在中等屏及以上（≥768px）生效，4 个 col-md-3 加起来正好占满一行（4 × 3 = 12）。
为什么不是 col-sm-3 或 col-lg-3
col-sm-3 从 576px 就开始生效，很多平板横屏或小尺寸桌面浏览器会误判为 sm，导致列数提前变成 4 列；而 col-lg-3 要等到 ≥992px 才触发，中间 768–991px 这段会被 col-12 主导，实际显示为 1 列——这不符合“桌面端 4 列”的需求。
-
md断点（768px）是 Bootstrap 官方推荐的“桌面起始点”，兼顾主流笔记本和大屏手机竖屏（后者通常 col-12） - 如果你项目明确要求 iPad 横屏（1024px）也必须 4 列，那就用
col-12 col-sm-3，但要测试小屏安卓平板是否出现意外换行 - Bootstrap 5 移除了
xs前缀，默认类即对应最小断点，所以col-12和col-md-3在 v4/v5 中行为一致
常见错误：加了 row 却没清空父容器内边距
如果外层容器有 padding（比如用 container-fluid 套在带 margin 的 section 里），可能让 row 的负边距失效，导致列错位或水平滚动条。这时候要么给父容器加 overflow-x: hidden，要么确保 row 直接子元素是 col-*，且没额外包裹 div。
- 正确结构：
<div class="row"> <div class="col-12 col-md-3">内容</div> <div class="col-12 col-md-3">内容</div> <div class="col-12 col-md-3">内容</div> <div class="col-12 col-md-3">内容</div> </div>
- 错误写法：
<div class="row"><div><div class="col-12 col-md-3">...</div></div></div>—— 中间多一层div会破坏row的负 margin 补偿逻辑 - 如果用了 Sass 自定义断点，确认
$grid-breakpoints中md确实是 768px，否则类名失效
需要响应式内容高度一致？别只靠栅格
栅格控制的是宽度和换行，但 4 列内容高度不一时，视觉上会显得参差。这不是栅格类能解决的，得配合其他手段：
- CSS Grid 替代方案：
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，再用@media (min-width: 768px)控制列数，更灵活 - JavaScript 补齐高度（不推荐）：监听窗口 resize 后统一设
min-height，但影响性能且 SSR 不友好 - 纯 CSS 方案：用
align-items: stretch配合display: flex的row，但需放弃 Bootstrap 的col-*类，改用自定义类
栅格类本身不处理垂直对齐，这点容易被忽略——尤其是后台管理页里一堆卡片并排时，第一眼看着齐，放大字体或换设备后立刻露馅。
