Question

我在两个网页上使用引导卡。在一页上，标题文本是固定的，因此我可以使用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文字的长度相似。我的一位李先生太长了，所以用2条线再次弄乱了卡头的整体外观。

Answer 1

您快到了。您只需要使用(function(params) { function sayHi(text) { console.log(text); } sayHi("Hello world") })()类来确保h-100上100%的高度为card-header

实时演示：

d-flex

引导卡头-所有高度相同

1 个答案: