英文:
Bootstrap 5 div with h-100 overflows parent row
问题
在屏幕宽度大于等于 md 的情况下，具有类名 stackOverflowCom 的 <div> 元素在使用 h-100 类时会超出父级 <div class="row"> 元素。你之所以需要使用 h-100 类，是因为你想将除了 "Red Keep" 和 "King's Landing" 之外的所有内容都对齐到卡片的底部。你可以如何实现这一目标？
任何帮助都会非常感激！
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
codepen: https://codepen.io/peppapig19/pen/KKGjBoK
on md+ screens the div with class stackOverflowCom overflows parent row when uses h-100. the reason why i need h-100 in the first place, is i want to align everything except "Red Keep" and "King's Landing" to the bottom of the card. how can i achieve this?
any help is much appreciated!
答案1
得分: 0
将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）。
<div class="stackOverflowCom d-block d-md-flex align-items-end">
在此代码片段中，只有上述两个部分需要翻译。
英文:
Add d-md-flex, flex-md-column, and justify-content-between classes to the parent container.<br>
<div class="col d-md-flex flex-md-column justify-content-between p-3">
Remove h-100 and justify-content-between from the stackOverflowCom container as they are not needed (you may also want to remove align-items-end)
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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 d-md-flex flex-md-column justify-content-between 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 align-items-end">
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论