html {
font-size: 14px;
}
.body {
background-color: whitesmoke;
}
.long-text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<div class="container my-5">
<div class="row">
<div class="container-fluid rounded shadow bg-white border mb-4">
<div class="row">
<div class="col-md-4 p-0 me-2">
<div id="carouselComponent" class="carousel slide h-100">
<div class="carousel-inner rounded h-100">
<div class="carousel-item h-100 active">
<img src="https://i.pinimg.com/originals/c8/a5/a8/c8a5a813afea19847217c765232b727d.jpg" class="d-block w-100 h-100 object-fit-cover" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselComponent" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselComponent" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</div>
<div class="col p-3">
<div class="row">
<h5 class="mb-1"><a>Red Keep</a></h5>
<div class="text-truncate text-muted mb-1">
<i class="fa fa-location-dot"></i> King's Landing
</div>
</div>
<div class="stackOverflowCom d-block d-md-flex justify-content-between align-items-end h-100">
<div>
<div class="mb-2"><span class="badge bg-primary">0.0</span> <a href="#!" class="text-muted">(0 reviews)</a></div>
<div class="long-text text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis metus quam, sodales eleifend mauris scelerisque non. Integer tincidunt turpis quis varius malesuada. Morbi efficitur pretium mauris vitae tempor. Praesent ultricies arcu eget sagittis malesuada. Vivamus viverra varius scelerisque. <br>
Suspendisse eget suscipit nulla, at feugiat felis. Curabitur eleifend lectus metus, sit amet convallis neque rhoncus efficitur. Phasellus ullamcorper interdum porta. Suspendisse potenti. Mauris sagittis felis tempus mauris venenatis pellentesque eget non augue. Aenean eu nisi faucibus, varius libero eget, vestibulum sem. Aliquam lacus est, vulputate ut ornare quis, blandit vel nisi. Cras rhoncus ante ipsum, sed sagittis risus aliquet eget.</div>
</div>
<div class="mt-2">
<div class="row justify-content-end align-items-baseline d-md-block">
<div class="col-4 col-md-12 d-flex justify-content-center align-items-baseline">
<h3>10000$</h3>
<span>/day</span>
</div>
<div class="col-4 col-md-12 d-flex justify-content-end">
<h6 class="text-decoration-line-through text-muted me-2">19999</h6>
<h6 class="text-success">-10%</h6>
</div>
</div>
<div class="d-grid">
<button class="btn btn-primary">Book</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
codepen:https://codepen.io/peppapig19/pen/KKGjBoK
在md+屏幕上,当使用h-100
时,类为stackOverflowCom
的div溢出父行。我首先需要h-100
的原因是,我想把除了“红堡”和“君临”之外的所有东西都对齐到卡片的底部。怎样才能做到呢?
任何帮助是非常感谢!
1条答案
按热度按时间2wnc66cl1#
将
d-md-flex
、flex-md-column
和justify-content-between
类添加到父容器。<div class="col d-md-flex flex-md-column justify-content-between p-3">
从
stackOverflowCom
容器中删除不需要的h-100
和justify-content-between
(您可能还希望删除align-items-end
)