Bootstrap 4 张牌，延长最后一张牌脚以填充 space

Question

我正在尝试扩展最后一个卡片页脚以填充 space 的其余部分（如果它没有任何按钮）。我尝试了很多 flex 组合，但运气不佳。

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

<div class="row">
  <div class="col-4 mb-4">
    <div class="card">
      <div class="card-header text-center">
        <span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
      </div>
      <div class="card-body">
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">4</span>
          </div>
        </div>
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">5</span>

          </div>
        </div>
      </div>
      <div class="card-footer d-flex">
        <div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
        <div class="">Final</div>
      </div>
      <div class="card-footer text-center">
<a target="_blank" title="" href="http://maps.apple.com/maps?daddr=34.8043103,-82.5869584" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i> Venue</a>
      </div>
    </div>

  </div>
<div class="col-4">
    <div class="card">
      <div class="card-header text-center">
        <span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
      </div>
      <div class="card-body">
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">4</span>
          </div>
        </div>
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">5</span>

          </div>
        </div>
      </div>
      <div class="card-footer d-flex">
        <div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
        <div class="">Final</div>
      </div>
      <div class="card-footer text-center">
<a target="_blank" title="" href="http://maps.apple.com/maps?daddr=34.8043103,-82.5869584" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i> Venue</a>
      </div>
    </div>

  </div>
  <div class="col-4">
    <div class="card">
      <div class="card-header text-center">
        <span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
      </div>
      <div class="card-body">
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">4</span>
          </div>
        </div>
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">5</span>

          </div>
        </div>
      </div>
      <div class="card-footer d-flex">
        <div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
        <div class="">Final</div>
      </div>
      <div class="card-footer text-center">
      </div>
    </div>

  </div>
</div>

Answer 1

您可以尝试以下方法（部分解决方案取自）：

.card {
  height: 100%;
}

.card-body {
  flex: 0 1 auto !important;
}

.card-footer.text-center {
  flex: 1;
}

我创建了一个 small fiddle 显示结果：

Bootstrap 4 张牌，延长最后一张牌脚以填充 space

Bootstrap 4 card, extend last card-footer to fill space

css

flexbox

twitter-bootstrap

bootstrap-4

bootstrap-cards