如何根据行中高度最大的卡片的高度设置卡片高度答案

【问题标题】：How to set card height depending on the height of the card with the largest height in the rows如何根据行中高度最大的卡片的高度设置卡片高度
【发布时间】：2020-12-23 12:24:50
【问题描述】：

我有一个row 喜欢：

<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">Title 1</h3>
                <p class="card-text">5 Line Text</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">Title 2</h3>
                <p class="card-text">3 Line Text</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">Title 3</h3>
                <p class="card-text">4 Line Text</p>
            </div>
        </div>
    </div>
</div>

在这种情况下，我有三张不同高度的卡片（第一个 5 行，第二个 3 行，第三个 4 行），这不是很漂亮......

我希望这些卡片的高度与最大高度相同（在本例中为 5 行）。

【问题讨论】：

您可以为此使用卡片组 - 请参阅 getbootstrap.com/docs/4.5/components/card/#card-decks

标签： javascript css bootstrap-4

【解决方案1】：

你有两种可能解决这个问题。

将h-100 utility class 添加到卡片容器 (.card)：

通过使用h-100 实用程序类，卡片可以获得列的高度。由于一行中的列高度相同，因此卡片的高度也相同。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="row">
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h3 class="card-title">Title 1</h3>
        <p class="card-text">
          5 Line Text<br>
          5 Line Text<br>
          5 Line Text<br>
          5 Line Text<br>
          5 Line Text
        </p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h3 class="card-title">Title 2</h3>
        <p class="card-text">
          3 Line Text<br>
          3 Line Text<br>
          3 Line Text
        </p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h3 class="card-title">Title 3</h3>
        <p class="card-text">
          4 Line Text<br>
          4 Line Text<br>
          4 Line Text<br>
          4 Line Text
        </p>
      </div>
    </div>
  </div>
</div>

使用card decks 使所有卡片高度相同：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="row">
  <div class="col">
    <div class="card-deck">
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Title 1</h3>
          <p class="card-text">
            5 Line Text<br>
            5 Line Text<br>
            5 Line Text<br>
            5 Line Text<br>
            5 Line Text
          </p>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Title 2</h3>
          <p class="card-text">
            3 Line Text<br>
            3 Line Text<br>
            3 Line Text
          </p>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Title 3</h3>
          <p class="card-text">
            4 Line Text<br>
            4 Line Text<br>
            4 Line Text<br>
            4 Line Text
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以简单地使用，解决此问题的最简单方法是使用h-100 类。

只需添加h-100 类并将其应用于您的.card div，以确保所有cards 的高度与您HTML 中的largest 高度卡相同。

现场工作演示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="row">
    <div class="col">
        <div class="card h-100">
            <div class="card-body">
                <h3 class="card-title">Title 1</h3>
                <p class="card-text">5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text5 Line Text</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <div class="card-body">
                <h3 class="card-title">Title 2</h3>
                <p class="card-text">3 Line Text3 Line Text3 Line Text3 Line Text3 Line Text3 Line Text3 Line Text3 Line Text</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <div class="card-body">
                <h3 class="card-title">Title 3</h3>
                <p class="card-text">4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text4 Line Text</p>
            </div>
        </div>
    </div>
</div>

【讨论】：