引导卡头 - 所有人的高度相同答案

【问题标题】：bootstrap card header - same height for all引导卡头 - 所有人的高度相同
【发布时间】：2020-12-05 17:40:33
【问题描述】：

我在两个网页上使用引导卡。在一页上，标题文本是固定的，因此我可以使用 min-height 来匹配它们的卡片标题高度。在第二页上，将生成这些卡片，因此我不知道文本长度和单词。我希望卡片标题在一行中的所有高度都相同。

有没有办法根据连续最大的卡片标题计算最小高度？

我已经在使用卡片组了。据我所知，这是针对整张卡片的高度，我的问题是卡片标题。卡片一般都具有相同的高度。

例子：

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    </head>
    <body>
     
    <div class="container">
            <div class="card-deck my-3 text-center">
                <div class="card mb-4 box-shadow">
                    <div class="card-header align-items-center d-flex
                justify-content-center card-header-height">
                        <h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum Lorem Ipsum Ipsum</h4>
                    </div>
                    <div class="card-image">
                        <img class="img-fluid" src="img_avatar1.png">
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mt-3 mb-4">
                        </ul>
                    </div>
                </div>
                <div class="card mb-4 box-shadow">
                    <div class="card-header align-items-center d-flex
                justify-content-center card-header-height">
                        <h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </h4>
                    </div>
                    <div class="card-image">
                        <img class="img-fluid" src="img_avatar1.png">
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mt-3 mb-4">
                        </ul>
                    </div>
                </div>
                <div class="card mb-4 box-shadow">
                    <div class="card-header align-items-center d-flex
                justify-content-center card-header-height">
                        <h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum </h4>
                    </div>
                    <div class="card-image">
                        <img class="img-fluid" src="img_avatar1.png">
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mt-3 mb-4">
                        </ul>
                    </div>
                </div>
            </div>
    </div>
    </body>
    </html>

更新在卡体中添加列表（ul）和列表项（li）后，我遇到了同样的问题。我花了几个小时才弄清楚为什么卡头高度不再起作用。 确保您的 li 文本长度相似。我的一个 li 太长了，所以它是 2 行再次破坏了卡片标题的整体外观。

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

你快到了。您只需要使用h-100 类来确保card-header 上的高度为100% 和d-flex

现场演示：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="card-deck my-3 text-center">
      <div class="card mb-4 box-shadow">
        <div class="card-header d-flex align-items-center justify-content-center h-100">
          <h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum Lorem Ipsum Ipsum</h4>
        </div>
        <div class="card-image">
          <img class="img-fluid" src="https://via.placeholder.com/150">
        </div>
        <div class="card-body">
          <ul class="list-unstyled mt-3 mb-4">
          </ul>
        </div>
      </div>
      <div class="card mb-4 box-shadow">
        <div class="card-header d-flex align-items-center justify-content-center h-100">
          <h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </h4>
        </div>
        <div class="card-image">
          <img class="img-fluid" src="https://via.placeholder.com/150">
        </div>
        <div class="card-body">
          <ul class="list-unstyled mt-3 mb-4">
          </ul>
        </div>
      </div>
      <div class="card mb-4 box-shadow">
        <div class="card-header d-flex align-items-center justify-content-center h-100">
          <h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum </h4>
        </div>
        <div class="card-image">
          <img class="img-fluid" src="https://via.placeholder.com/150">
        </div>
        <div class="card-body">
          <ul class="list-unstyled mt-3 mb-4">
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

我刚刚在这里发现了一个类似的问题。看起来你是对的。现在唯一的问题是在 768 到 794 像素宽度（iPad）上它不起作用。在标记任何解决方案之前，现在必须检查它。
@Yaerox 这应该可以 - 但是您可以使用 ipad 的媒体查询来确保高度保持不变100% 你要我添加 ipad 的媒体查询吗？
我有一些，如果我的问题在那里，我必须检查一下；）
通过使用 h-100，我可以删除所有修改我卡片的媒体查询。我的代码中仍然存在相同的问题，而您的 sn-p 没有。我找不到任何通过更改设备宽度来激活的媒体查询。您对我有什么提示吗？您想到了什么样的媒体查询？ -- 更新：好的，所以我认为只要将
元素添加到卡体中的

@Yaerox 我非常怀疑这种结构是否可行，因为 row 和 col-md-4 在这里阻止了我们:(