0

如您所见，第二张卡片的标题将图像向下推。如何动态调整卡片标题的大小以对齐所有图像？谢谢你。

在此处输入图像描述 引导卡 

</head>
<body> 
 
<div class="container-fluid">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
  <div class="col">
    <div class="card bg-primary">  
      <div class="card-body text-center">
        <h4 class="card-title">John Doe</h4>
        <img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image">        
        <p class="card-text">Some text inside the first card</p>
      </div>
    </div>
  </div>
  
  <div class="col">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <h4 class="card-title">John Doe & other possible long text that pushes the image down  </h4>
        <img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image">        
        <p class="card-text">Some text inside the second card</p>
      </div>
    </div>
  </div>
  
  <div class="col">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <h4 class="card-title">John Doe </h4>
        <img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image">        
        <p class="card-text">Some text inside the third card</p>
      </div>
    </div>
  </div> 
  
  </div>
</div>

</body>
</html>

JsFiddle 代码

4

2 回答 2

0

如果卡片顶部的长文本变化太大，难以为每种情况设置一个高度，您可以使用 JavaScript 在页面首次加载时设置高度，并使用监听器来判断页面何时加载改变大小。

const titleList = document.querySelectorAll(".title-section");

function sizeTitleSections () {
    let tallest = 0;
    titleList.forEach(element => {
        element.style.height = null;
    });
    titleList.forEach(element => {
        let thisHeight = element.clientHeight;
        if (thisHeight > tallest) {
            tallest = thisHeight;
        }
    });

    titleList.forEach(element => {
        element.style.height = tallest + "px";
    })
}

sizeTitleSections();

window.addEventListener('resize', sizeTitleSections);
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>

<div class="container-fluid my-5">
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
        <div class="col mb-3">
            <div class="card h-100 bg-primary">
                <div class="card-body text-center">
                    <h4 class="card-title title-section">John Doe</h4>
                    <img class="card-img-top" src="https://via.placeholder.com/500" alt="Card image">
                    <p class="card-text">Some text inside the first card</p>
                </div>
            </div>
        </div>

        <div class="col mb-3">
            <div class="card h-100 bg-primary">
                <div class="card-body text-center">
                    <h4 class="card-title title-section">John Doe & other possible long text that push the image down </h4>
                    <img class="card-img-top" src="https://via.placeholder.com/500" alt="Card image">
                    <p class="card-text">Some text inside the second card</p>
                </div>
            </div>
        </div>

        <div class="col mb-3">
            <div class="card h-100 bg-primary">
                <div class="card-body text-center">
                    <h4 class="card-title title-section">John Doe </h4>
                    <img class="card-img-top" src="https://via.placeholder.com/500" alt="Card image">
                    <p class="card-text">Some text inside the third card</p>
                </div>
            </div>
        </div>

    </div>

我使用了来自 placeholder.com 的图像，因为来自 w3schools.com 的图像有时需要一段时间才能加载。

于 2021-04-11T04:05:30.250 回答
0

您可以尝试添加类似 style="height: 4vw;" 到h4标题卡，将所有图像下推相同数量，因此图像从同一级别开始。

于 2021-04-11T03:37:29.993 回答