1

如果它没有任何按钮，我正在尝试扩展最后一个卡片页脚以填充其余空间。我尝试了许多弹性组合，但运气不佳。

<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>

英石

4

1 回答 1

0

您可以尝试以下方法（部分解决方案是从此答案中检索到的）：

.card {
  height: 100%;
}

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

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

我创建了一个小小提琴显示结果：

显示结果

于 2020-08-01T17:36:53.847 回答