如何在Bootstrap 5中正确实现卡片组件居中对齐

问题根因 #

你当前的布局冲突来自两个设置的不匹配：

• Bootstrap的col-md-3类在中等及以上屏幕下默认占父容器25%宽度，且自带左右内边距
• 你给卡片设置了固定宽度style="width: 18rem"，卡片宽度和外层col-md-3的宽度不一致，justify-content-evenly只会给外层的col-md-3容器分配空间，不会调整卡片在列内的位置，最终出现错位。

解决方法 #

提供两种可选方案，按需选择即可：

方案1：删除卡片固定宽度（推荐，保留栅格响应式特性） #

直接移除所有卡片标签上的固定宽度样式，让卡片自适应外层栅格列的宽度：

<!-- 修改前 -->
<div class="card" style="width: 18rem">
<!-- 修改后 -->
<div class="card">

修改后卡片会自动填充满col-md-3的可用空间，配合justify-content-evenly就能实现均匀对齐，同时保留响应式效果，在小屏幕下会自动换行。

方案2：保留卡片固定宽度，移除栅格宽度限制 #

如果业务要求卡片必须保持18rem的固定宽度，可把外层col-md-3的栅格宽度类去掉，让justify-content-evenly直接给卡片容器分配空间：

<!-- 修改前 -->
<div class="col-md-3 mb-5">
<!-- 修改后 -->
<div class="mb-5">

如果修改后卡片仍有水平偏移，可给容器加上居中类：<div class="mb-5 d-flex justify-content-center">，强制让卡片在容器内水平居中。

内容的提问来源于stack exchange，提问作者Trayansh Agarwal