Question

我有一个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行）。

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

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

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

2 个答案: