具有等高卡片的 Bootstrap 4 响应式卡片列

Posted 2023-02-24

【中文标题】具有等高卡片的 Bootstrap 4 响应式卡片列

【英文标题】：Bootstrap 4 responsive card columns with equal height cards

【发布时间】：2021-06-05 23:18:30

【问题描述】：

我有一个看起来像这样的 Django 模板：

<div class="container-fluid" style="padding: 25px">
    <div class="card-columns">
    % for service in services %
      <div class="card">
        <img class="card-img-top img-fluid" src="..." />
        <div class="card-body">
          <h5 class="card-title">Title</h5>
          <p class="card-text">Description</p>
        </div>
      </div>
    % endfor %
    </div>
</div>

我需要根据视口响应列数，我使用以下 css 实现了这一点：

.card-columns 
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;


@media (max-width: 48em) 
    .card-columns 
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    

但现在我无法让卡片高度对齐。我尝试在卡上设置height: 100%，以及许多其他设置相同高度的解决方案，但它们都以某种方式破坏了代码。

大多数解决方案建议使用card-deck 或row 和col 的组合，但在我的情况下这些都不起作用，因为services 列表的大小是动态的。

如何根据视口缩放列数，每行具有相同的高度，同时在网格中拥有动态数量的对象？

【参考方案1】：

做了一些事情，我希望这就是你要找的东西

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex align-content-stretch flex-wrap card-columns-group">

  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in supporting text below as a natural lead-in supporting text below as a natural lead-in supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in ting text below as a natural lead-in ting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
</div>