动态调整引导卡标题以对齐图像
Posted
技术标签:
【中文标题】动态调整引导卡标题以对齐图像【英文标题】：Dynamically resize bootstrap cards title to align image 【发布时间】：2021-07-06 11:59:33 【问题描述】：如您所见，第二张卡片的标题将图像向下推。 如何动态调整卡片标题的大小以对齐所有图像？ 谢谢。
引导卡
</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" >
<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" >
<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" >
<p class="card-text">Some text inside the third card</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JsFiddle code
【问题讨论】：
【参考方案1】：您可以尝试添加类似 style="height: 4vw;" 的内容到h4标题卡，将所有图像下推相同数量，因此图像都从同一级别开始。
【讨论】：
【参考方案2】：如果卡片顶部的长文本变化太大，难以为每种情况设置一个高度，您可以在页面首次加载时使用 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" >
<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" >
<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" >
<p class="card-text">Some text inside the third card</p>
</div>
</div>
</div>
</div>我使用了来自 placeholder.com 的图片，因为来自 w3schools.com 的图片有时需要一段时间才能加载。
【讨论】：
以上是关于动态调整引导卡标题以对齐图像的主要内容，如果未能解决你的问题，请参考以下文章
如何垂直对齐当前正在使用列中的引导 4 类 img-fluid 的图像？