Bootstrap栅格不自动填充最后一行空白，这是设计使然；正确解法是用row-cols-*类或CSS Grid替代传统col类，而非强行用justify-content类修补。
最后一行列数不足12时，Bootstrap默认不补空、不拉伸
bootstrap栅格系统本身不自动填充或对齐最后一行的空白——它只是按 col-*-* 类分配宽度，剩余空间就空着。这不是 bug，是设计使然：栅格只管“分列”，不管“视觉对齐”。常见现象是，当用 col-sm-4 排 5 个卡片（5×4=20 > 12），最后一行只剩 2 个，左边两个靠左堆在一起，右边一大片留白。
- 不要指望
.row自动让最后一行居中或等宽拉伸 - 也不要用
.justify-content-center直接套在.row上——它会让所有列一起居中，破坏整行网格结构（尤其多行时更明显） - 如果项目是动态生成的（比如从 API 拉 7 条数据），硬写
col-sm-4+ 手动补<div class="col-sm-4"></div>容易出错且难维护
用 justify-content-center 或 justify-content-between 需配合固定列数逻辑
想让最后一行“看起来对齐”，得先明确你想要的效果：是所有项目居中排列？还是两两之间等距？还是最后一行单独处理？
-
justify-content-center：适合总数少、全放一行的场景（如 3 个 logo），但放在多行.row上会导致每行都居中，可能让第一行和最后一行错位 -
justify-content-between：适合固定数量（如始终 4 项），但若最后一行只有 1–3 项，间距会异常拉大，反而更难看 - 真正可控的做法是：把最后一行单独抽出来，用一个独立的
.row.justify-content-center包裹，其余行保持默认左对齐
响应式下更要小心断点切换导致的“对齐错觉”
在 sm 断点显示 col-sm-6（每行 2 列），到 md 变成 col-md-4（每行 3 列），原来 7 个项目在小屏是 4+3，大屏变成 3+3+1——最后一行突然只剩 1 个，位置突兀。这时单纯加类没用，必须结合 JS 或服务端逻辑预判行尾。
- 别只测一个断点，要交叉验证
sm/md/lg下最后一行是否都合理 - 避免用
text-center强行居中最后一行的容器——文字居中 ≠ 网格列居中，容易和.col的 padding/margin 冲突 - 如果项目高度不一致，还叠加
align-items-center，可能让最后一行卡片上下错位，比左右不对齐更显眼
真正靠谱的解法：CSS Grid 替代或 Bootstrap 5.3+ 的 row-cols-*
原生 Bootstrap 栅格对“不完整行”的支持非常弱；与其折腾补丁，不如换更匹配的工具。
- 用
row-cols-3（Bootstrap 5.3+）替代手写col-md-4：它让每行强制 3 列，自动换行，最后一行自然居中（需配合justify-content-center在 row 上） - 更彻底的方案是弃用
.row/.col，改用 CSS Grid：display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，它天生处理不完整行，且响应式更干净 - 注意：Grid 方案在 IE11 不支持；若需兼容，老项目建议用 JS 动态计算并插入占位
<div class="col-sm-4 invisible"></div>，但仅限简单静态页
最后一行对齐不是样式问题，是布局模型的选择问题。很多人卡在“怎么用现有类修好”，其实该问的是：“这个列表到底适不适合用传统栅格”。
