Bootstrap卡片溢出行影响其他元素边距问题求助

嗨，别担心！作为新手第一次提问完全没问题，咱们一起搞定这个卡片布局的小问题～

你遇到的情况其实是Bootstrap栅格系统的默认行为：如果把多列卡片都放在同一个.row容器里，当第一行的卡片高度不一致时，第二行的列会自动从第一行最高元素的下方开始排列，而不是对齐到新行的顶部。要让两行完全独立，第一行的高度不影响第二行，咱们可以这样做：

方法1：拆分独立的.row容器 #

这是最直接的解决方案：把每一行的卡片内容分别放在单独的.row里，这样两行就完全分隔开了，彼此的高度不会互相影响。

比如原来的代码可能是这样：

<div class="row">
  <!-- 第一行的两个卡片 -->
  <div class="col-md-8">
    <div class="card">...</div>
  </div>
  <div class="col-md-4">
    <div class="card">...</div>
  </div>
  <!-- 第二行的卡片 -->
  <div class="col-md-6">
    <div class="card">...</div>
  </div>
  <div class="col-md-6">
    <div class="card">...</div>
  </div>
</div>

改成这样：

<!-- 第一行 -->
<div class="row">
  <div class="col-md-8">
    <div class="card">...</div>
  </div>
  <div class="col-md-4">
    <div class="card">...</div>
  </div>
</div>

<!-- 第二行（和第一行完全独立） -->
<div class="row mt-3"> <!-- mt-3是加个上边距，让两行不挤在一起 -->
  <div class="col-md-6">
    <div class="card">...</div>
  </div>
  <div class="col-md-6">
    <div class="card">...</div>
  </div>
</div>

方法2：让同一行内的卡片高度一致（可选） #

如果你希望同一行里的卡片高度相同，避免视觉上的错位，可以给卡片添加h-100类，让卡片占满所在列的高度：

<div class="col-md-8">
  <div class="card h-100">...</div>
</div>
<div class="col-md-4">
  <div class="card h-100">...</div>
</div>

这样同一行的卡片会自动拉伸到相同高度，即使内容多少不同，也不会影响下一行的布局。

这样调整后，第一行的高度就不会再干扰第二行元素的位置啦～

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