gpt4 book ai didi

html - Bootstrap 4 卡片页脚未与页面底部对齐

转载 作者:行者123 更新时间:2023-12-04 12:01:00 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 4 卡片的类“卡片页脚”,但页脚未与页面底部对齐。
这是链接to the js fiddle

<div class="container">
<div class="card text-center">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">This text should be equi-distance from header
and footer. </p>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam
sapien sem, ornare ac, nonummy non, lobortis a enim. Nam sed
tellus id magna elementum tincidunt. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Aliquam ornare wisi eu metus. In enim a arcu imperdiet malesuada.
Nam quis nulla. Vivamus luctus egestas leo.
</p>
</div>
<div class="card-footer text-muted">
This footer should be at the bottom
</div>
</div>
</div>

最佳答案

该卡需要全高。 Bootstrap 4 有一个 h-100 height:100% 的类(class)...

<div class="container h-100">
<div class="card h-100 text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
...
</div>
<div class="card-footer text-muted">
This footer should be at the bottom
</div>
</div>
</div>

https://jsfiddle.net/eqfxk9wo/

关于html - Bootstrap 4 卡片页脚未与页面底部对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51877488/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com