动态调整引导卡标题以对齐图像

如何解决动态调整引导卡标题以对齐图像

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

引导卡

</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 code

解决方法

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

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

PagingDataAdapter<Order,OrderAdapter.ViewHolder>(OrdersDiffer)

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);

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

动态调整引导卡标题以对齐图像

如何解决动态调整引导卡标题以对齐图像

解决方法

相关推荐