row-cols-md-3 使 .row 在 ≥768px 时每行强制显示 3 列并等宽，不依赖 12 列栅格规则；与 col-md-4 本质不同，且需 Bootstrap ≥5.1 才稳定支持。
row-cols-md-3 的作用是让 .row 在中屏及以上（≥768px）时，**每行最多显示 3 个子列**，且自动等宽；它不关心你放了几个 .col，也不依赖 12 列计算规则——这是它和 col-md-4 的根本区别。
row-cols-md-3 和 col-md-4 的行为差异
很多人误以为 row-cols-md-3 ≈ 三个 col-md-4，其实不是：
-
col-md-4是“每个列占 4/12 = 33.333% 宽度”，总宽必须 ≤12 才能单行显示；放 4 个就会换行 -
row-cols-md-3是“强制每行塞满 3 列”，每个列自动均分剩余宽度（≈33.333%），哪怕你只放 2 个.col，它们也还是各占 50%，后面留空 - 如果子列内容高度不一，
row-cols-md-3不会拉高整行（Flex 默认行为），而col-md-4下的.row会因 Flex 对齐导致底部错位
响应式断点要对齐设备视口宽度
row-cols-md-3 中的 md 指的是 Bootstrap 的 min-width: 768px 断点，不是“中等屏幕”的模糊概念。实际效果取决于你页面是否满足两个前提：
- 父容器必须是
.container或.container-fluid，否则负 margin 和 padding gutter 会失效 - 不能在
.row外层再套非栅格容器（比如裸<div>或语义标签未加.container），否则断点媒体查询可能不触发 - 如果你用的是自定义 CSS 重置了
font-size或root em基准，Bootstrap 的@media (min-width: 768px)仍按原始像素判断，不会缩放
内容溢出或换行异常的常见原因
即使用了 row-cols-md-3，第五个 .col 还是掉到第二行？大概率是以下之一：
- 子元素含图片或长单词，没设
min-width: 0或overflow-wrap: break-word，导致 Flex 项拒绝收缩 - 手动给
.col加了width: 30%或flex-basis，覆盖了row-cols-*的自动均分逻辑 - 嵌套了另一层
.row但没加.col包裹，破坏了 Flex 流，浏览器回退到 inline-block 渲染 - 用了
row-cols-md-3却在小屏下没配降级方案（如row-cols-1），导致手机端仍强行三列挤在一起
搭配 justify-content-* 控制最后一行对齐
当子列总数不是 3 的倍数（比如 7 个 .col），最后一行只有 1 个或 2 个，它们默认左对齐。想居中？直接在 .row 上加 justify-content-center：
<div class="row row-cols-md-3 justify-content-center"> <div class="col">A</div> <div class="col">B</div> <div class="col">C</div> <div class="col">D</div> <div class="col">E</div> </div>
注意：justify-content-center 是 Flex 属性，只影响主轴（水平方向），不影响交叉轴；若需垂直居中，得额外加 align-items-center，但通常卡片类布局更常用 h-100 配合 d-flex flex-column 控制内部对齐。
真正容易被忽略的是：row-cols-* 类从 Bootstrap 5.1 开始才稳定支持，低于该版本（比如 5.0.x）可能渲染异常或完全无效——别只看文档标题写“Bootstrap 5”，得确认你用的确实是 ≥5.1 的构建包。
