Bootstrap 4中card-deck内list-groups等高实现问题求助

我懂你的痛点——想在Bootstrap 4的card-deck里让内部的list-group或者card-block自动保持水平等高，又不想用固定高度这种不够灵活的办法对吧？其实只要利用Bootstrap原生的flex布局类就能完美解决，不用写额外CSS。

核心思路 #

card-deck本身已经是flex容器，能让卡片整体等高，但内部的内容区块（比如card-body、list-group）需要调整布局规则，让它们自动填充卡片的剩余空间：

1. 给每个card添加d-flex flex-column，把卡片变成垂直方向的flex容器。
2. 给需要等高的内部区块（card-body/list-group）加上flex-fill类，这个类会让区块占据卡片内的所有剩余空间，从而和其他卡片的对应区块保持等高。

完整代码示例 #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="container mt-4">
  <div class="card-deck">
    <!-- 带card-body的卡片 -->
    <div class="card d-flex flex-column">
      <div class="card-header">Card 1 (Card Body)</div>
      <div class="card-body flex-fill">
        <p class="card-text">这是一段较短的测试内容，用来验证等高效果。</p>
      </div>
      <div class="card-footer text-muted">Footer</div>
    </div>

    <!-- 内容较长的卡片 -->
    <div class="card d-flex flex-column">
      <div class="card-header">Card 2 (Long Content)</div>
      <div class="card-body flex-fill">
        <p class="card-text">这是一段非常长的测试内容，用来验证等高效果。这是一段非常长的测试内容，用来验证等高效果。这是一段非常长的测试内容，用来验证等高效果。这是一段非常长的测试内容，用来验证等高效果。</p>
      </div>
      <div class="card-footer text-muted">Footer</div>
    </div>

    <!-- 带list-group的卡片 -->
    <div class="card d-flex flex-column">
      <div class="card-header">Card 3 (List Group)</div>
      <ul class="list-group list-group-flush flex-fill">
        <li class="list-group-item">列表项 1</li>
        <li class="list-group-item">列表项 2</li>
        <li class="list-group-item">列表项 3</li>
      </ul>
      <div class="card-footer text-muted">Footer</div>
    </div>
  </div>
</div>

关键细节说明 #

• d-flex flex-column：将卡片内部的元素改为垂直弹性布局，这样内部区块可以根据剩余空间调整高度。
• flex-fill：等价于flex: 1 1 auto，会让目标区块自动拉伸，填满卡片内除了header和footer之外的所有空间，确保所有卡片的对应区块高度一致。
• list-group-flush：让list-group和卡片边缘无缝衔接，视觉上更协调，搭配flex-fill就能让列表区域和其他卡片的body等高。

这样调整后，不管每个卡片的内容长短，内部的核心区块都会自动保持等高，完全不需要固定高度，完美适配响应式布局。

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