- 首页
- 前端开发
- Bootstrap 4 卡片 - 在底部对齐内容
Bootstrap 4 卡片 - 在底部对齐内容
[英] Bootstrap 4 cards - align content at the bottom
本文介绍了Bootstrap 4 卡片 - 在底部对齐内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我将一组引导卡放在一个卡组中，这意味着它们都具有相同的宽度和高度.每张卡片的内容高度不同，我需要在每张卡片的底部对齐一个按钮(不是卡片的页脚，我在那里有其他内容).我尝试在每张卡片中添加人工"空白区域，以便它们都匹配，但是在调整窗口大小时会中断.有任何想法吗?这是相关的代码.
<div class="card"><div class="card-header">标题
<div class="card-body"><div>1号线
<div>2号线
<div>3号线
<div><input type="button" class="btn btn-primary" value="需要这个按钮在卡片底部对齐"/>
<div class="card-footer">页脚
<div class="card"><div class="card-header">标题
<div class="card-body"><div>1号线
<div>2号线
<div><input type="button" class="btn btn-primary" value="需要这个按钮在卡片底部对齐"/>
<div class="card-footer">页脚
<div class="card"><div class="card-header">标题
<div class="card-body"><div>1号线
<div>2号线
<div>3号线
<div>4号线
<div><input type="button" class="btn btn-primary" value="需要这个按钮在卡片底部对齐"/>
<div class="card-footer">页脚
谢谢！
解决方案
使用 flexbox utils 和/或 自动边距.例如，您可以使 .card-body display:flex (d-flex flex-column) 和 margin-top:auto (mt-auto) 按下按钮...
https://codeply.com/go/mfrRHlgydc
<div class="card"><div class="card-header">标题
<div class="card-body d-flex flex-column"><div>1号线
<div>2号线
<div class="mt-auto"><input type="button" class="btn btn-primary" value="需要这个按钮在卡片底部对齐"/>
<div class="card-footer">...
<div class="card"><div class="card-header">标题
<div class="card-body d-flex flex-column"><div>1号线
<div>2号线
<div>3号线
<div class="mt-auto"><input type="button" class="btn btn-primary" value="需要这个按钮在卡片底部对齐"/>
<div class="card-footer">..
相关问题:
Bootstrap - 将按钮与卡片底部对齐
使用 Flexbox 在 Bootstrap 4 .card 中对齐项目
I have a group of bootstrap cards put together in a card-group, meaning they all have the same width and height. Each card's content is different in height, and I need a button aligned at the bottom of each card (not the card's footer, i have other content there). I tried adding 'artificial' blank space in each card so they all match, but that breaks when resizing the window. Any ideas? Here's the relevant code.
<div class="card-group">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
<div>
Line 1
</div>
<div>
Line 2
</div>
<div>
Line 3
</div>
<div>
<input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" />
</div>
</div>
<div class="card-footer">
Footer
</div>
</div>
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
<div>
Line 1
</div>
<div>
Line 2
</div>
<div>
<input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" />
</div>
</div>
<div class="card-footer">
Footer
</div>
</div>
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
<div>
Line 1
</div>
<div>
Line 2
</div>
<div>
Line 3
</div>
<div>
Line 4
</div>
<div>
<input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" />
</div>
</div>
<div class="card-footer">
Footer
</div>
</div>
</div>
Thanks!
解决方案
Use the flexbox utils and/or auto margins. For example, you can make the .card-body display:flex (d-flex flex-column) and the margin-top:auto (mt-auto) to push the button down...
https://codeply.com/go/mfrRHlgydc
<div class="card-group">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body d-flex flex-column">
<div>
Line 1
</div>
<div>
Line 2
</div>
<div class="mt-auto">
<input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" />
</div>
</div>
<div class="card-footer">
...
</div>
</div>
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body d-flex flex-column">
<div>
Line 1
</div>
<div>
Line 2
</div>
<div>
Line 3
</div>
<div class="mt-auto">
<input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" />
</div>
</div>
<div class="card-footer">
..
</div>
</div>
</div>
Related questions:
Bootstrap - align button to the bottom of card
Aligning items within a Bootstrap 4 .card using Flexbox
这篇关于Bootstrap 4 卡片 - 在底部对齐内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
