我在我的旋转木马中使用卡片作为图像，我想使每张卡片的高度相等。
使用H-100级不起作用。
改变任何的p标签内容使卡的大小不同于其他人，而我想它有一个固定的大小。
看这张照片，我有两个。左边的山坳是猫头鹰旋转木马，右边的山坳是广告。
我希望他们的身高都一样
我期待着你能提出的任何建议和解决方案。谢谢.
下面是我的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
</head>
<body class="bg-primary">
<section class="pt-5">
<div class="container">
<div class="row">
<div class="col-lg-9 mb-3">
<h2 class="mb-5 text-dark">Our Products</h2>
<div class="owl-carousel new-product">
<div class="me-1 ms-1 d-flex align-items-stretch">
<div class="card w-100 h-100">
<div class="card-body d-flex flex-column">
<a href="#" class="text-dark h2 text-decoration-none mb-4">Underground House</a>
<div class="float-start">
<span class="badge bg-success p-3"></span>
</div>
<img src="https://www.forbes.com/advisor/wp-content/uploads/2021/08/download-22.jpg" alt="" height="125">
<div class="small text-center mt-5">
<span>A bunker is meant to be a shelter from bombs or other disasters, but an underground house is intended as a permanent dwelling. </span>
</div>
</div>
</div>
</div>
<div class="me-1 ms-1 d-flex align-items-stretch">
<div class="card w-100 h-100">
<div class="card-body d-flex flex-column">
<a href="#" class="text-dark h2 text-decoration-none mb-4">Carriage / Coach House</a>
<div class="float-start">
<span class="badge bg-success p-3"></span>
</div>
<img src="https://www.forbes.com/advisor/wp-content/uploads/2021/08/download-9.jpg" alt="" height="125">
<div class="small text-center mt-5">
<span>Initially built to store the horse-drawn carriage or coach of the residents of the main house, a carriage or coach house is a separate building on the property. </span>
</div>
</div>
</div>
</div>
<div class="me-1 ms-1 d-flex align-items-stretch">
<div class="card w-100 h-100">
<div class="card-body d-flex flex-column">
<a href="#" class="text-dark h2 text-decoration-none mb-4">In-Law Suite</a>
<div class="float-start">
<span class="badge bg-success p-3"></span>
</div>
<img src="https://www.forbes.com/advisor/wp-content/uploads/2021/08/download-8.jpg" alt="" height="125">
<div class="small text-center mt-5">
<span>A house that’s classified as a single-family home can still be meant for multiple generations.</span>
</div>
</div>
</div>
</div>
<div class="me-1 ms-1 d-flex align-items-stretch">
<div class="card w-100 h-100">
<div class="card-body d-flex flex-column">
<a href="#" class="text-dark h2 text-decoration-none mb-4">Single-Family</a>
<div class="float-start">
<span class="badge bg-success p-3"></span>
</div>
<img src="https://thumbor.forbes.com/thumbor/fit-in/900x510/https://www.forbes.com/home-improvement/wp-content/uploads/2022/07/download-23.jpg" alt="" height="125">
<div class="small text-center mt-5">
<span>Detached single-family houses are the most common types of homes in the U.S., as well as the most desirable for many Americans. </span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 mb-3">
<div class="card">
<img src="https://www.buildofy.com/blog/content/images/size/w2000/2022/06/_DSC9610-Edited_-min.jpg" class="img-fluid" height="100" alt="">
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script>
$('.new-product').owlCarousel({
autoplay: true,
autoplayHoverPause: true,
loop: true,
autoplayTimeout: 2000,
items: 2,
nav: true,
responsive: {
0: {
items: 1,
dots: false,
},
485: {
items: 2,
dots: false,
},
728: {
items: 3,
dots: false,
},
960: {
items: 4,
dots: false,
},
1200: {
items: 4,
dots: true,
}
}
});
</script>
</body>
</html>
1条答案
按热度按时间juzqafwq1#
好的，这个解决方案有两个部分。第一部分是让卡片在旋转木马是相同的高度。第二部分是自定义列与静态图像在它匹配的高度的其他卡。
**第一部分：**你需要更新你的“猫头鹰Carnival”配置来解决这个问题。
Owl Carousel引用类'owl-carousel'来添加用于控制行为的标记。如果你想使用类
d-flex，你需要将它添加到Owl Carnival标记中，而不是你自己的。查看文档here，您可以使用属性 *'stageClass'**自定义相关的 Package 器类：
值得注意的是，您应该在
d-flex中包含一个额外的类。出于某种原因，显示器可能有点故障，有时根本不工作，如果只有“d-flex”。就我个人而言，我在它旁边包含了默认的类名'owl-stage'，它可以按预期工作。第二部分：你需要编辑你的类来允许图像使用flex-grow属性（类
flex-grow-1）来增加大小，并包括一个“object-fit”类来允许图像缩放和填充空间（类object-fit-cover）EDIT最后几个修改是，第一，将
<h2>移动到行上方，以防止它增加不必要的高度。第二，更新“静态图像”标记，使其不会在移动的上缩小：
这是因为你有一个“500”的高度，加上Bootstrap的
img-fluid类的“自动高度”。图像宽高比由object-fit-cover类处理。JS Fiddle更新：https://jsfiddle.net/lmonk/jz8c06yg/10/