css 引导卡接头-所有高度相同

oknwwptz 于 2023-05-08 发布在其他

关注(0)|答案(1)|浏览(126)

我在两个网页上使用引导卡。在一个页面上，标题文本是固定的，所以我可以使用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>

更新我在card-body中添加了list（ul）和list-items（li）后遇到了同样的问题。我花了几个小时才弄明白为什么卡头高度不再起作用了。**请确保您的li文本长度相似。我的一个li太长了，所以它是2行，这再次破坏了卡头的整体外观。

css

来源：https://stackoverflow.com/questions/63436397/bootstrap-card-header-same-height-for-all

1条答案

按热度按时间

eqqqjvef1#

你差点就到了。您只需要使用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>

赞(0）回复(0）举报 2023-05-08

我来回答

css 引导卡接头-所有高度相同

1条答案

相关问题

热门标签

最新问答