Bootstrap卡片栅格布局每行仅3列、第4列溢出换行问题如何解决？

架构老林

2026-9-26

故障根因

全局div样式div { display: grid; }覆盖了Bootstrap原生row、col的flex布局属性，破坏了网格系统的宽度计算逻辑
.container主动设置了display: grid，覆盖Bootstrap container默认布局，进一步导致宽度计算异常
col-md-3与card类绑定在同一个DOM节点，.card的margin: .5em属性会额外增加列的总宽度，4列总宽度超过100%后第四张卡片被挤到下一行

修复方案

删除冲突的全局样式
删掉CSS中以下两行代码：

div {
    display: grid;
    grid-auto-flow: inherit;
}

同时删除.container样式中的display: grid属性，保留Bootstrap原生组件的布局逻辑。

调整卡片DOM结构
将col和card拆分为两层节点，col仅负责宽度分配，card作为col的子元素承载卡片样式，避免外边距影响列宽计算，修改示例如下：

<div class="row">
  <!-- 单个卡片结构示例 -->
  <div class="col-md-3">
    <div class="card" style="justify-content: center">
      <img style="height:250px; width: fit-content;" src="../Images/activityss.jpg" alt="Activity Doc" />
      <div style="justify-items: center;">Unusual Activity</div>
    </div>
  </div>
  <!-- 剩余3张卡片按上述结构重复即可 -->
</div>

所有卡片都按照该结构调整即可实现一行4张卡片的布局效果。