Bootstrap 4 Column Card重叠问题：一行放4张卡片遇重叠如何无自定义CSS解决？

嘿，我来帮你搞定这个卡片重叠的问题！不用自定义CSS完全可以解决，核心就是把Bootstrap的网格系统用对，以下是具体步骤和示例：

1. 严格遵循Bootstrap网格层级结构 #

Bootstrap的布局是「容器→行→列→内容」的固定层级，卡片必须放在列（col-*）内部，列要包裹在行（row）里，行再放在容器（container或container-fluid）中。这个层级乱了很容易出现布局混乱。

2. 选对列宽类适配12列布局 #

Bootstrap 4的网格是12列设计，要放4张卡片的话，每列应该占3份（4×3=12），所以用col-md-3（中等屏幕及以上每列占3格）。如果需要适配小屏幕，可以搭配col-sm-6（小屏幕下每行显示2张），避免手机端卡片挤成一团。

3. 用Bootstrap内置间距类调整卡片间距 #

直接给列加上mb-4（底部外边距）、mx-2（左右外边距）这类内置类，不用自己写CSS就能让卡片之间的距离更合理。

完整示例代码 #

<!-- 可选container-fluid让布局占满全屏 -->
<div class="container">
  <!-- 行容器，负责包裹所有列 -->
  <div class="row">
    <!-- 第一张卡片 -->
    <div class="col-md-3 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">卡片标题1</h5>
          <p class="card-text">这里是卡片的内容区域，测试文本测试文本。</p>
        </div>
      </div>
    </div>
    <!-- 第二张卡片 -->
    <div class="col-md-3 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">卡片标题2</h5>
          <p class="card-text">这里是卡片的内容区域，测试文本测试文本。</p>
        </div>
      </div>
    </div>
    <!-- 第三张卡片 -->
    <div class="col-md-3 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">卡片标题3</h5>
          <p class="card-text">这里是卡片的内容区域，测试文本测试文本。</p>
        </div>
      </div>
    </div>
    <!-- 第四张卡片 -->
    <div class="col-md-3 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">卡片标题4</h5>
          <p class="card-text">这里是卡片的内容区域，测试文本测试文本。</p>
        </div>
      </div>
    </div>
  </div>
</div>

排查你可能踩的坑 #

• 没有把卡片放进col-*元素，直接把card塞进row里
• 列宽类总和超过12（比如误用col-md-4，4×4=16>12，必然重叠）
• 给卡片或列加了自定义的float、position: absolute属性，打乱了Bootstrap的布局逻辑

按照这个结构来，不管是3张还是4张卡片，都能均匀分布不会重叠啦！

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