我将一组引导卡放在一个卡组中,这意味着它们都具有相同的宽度和高度。每张卡的内容高度不同,我需要在每张卡的底部对齐一个按钮(不是卡的页脚,我还有其他内容)。我尝试在每张卡片中添加“人工”空白区域,以便它们都匹配,但在调整窗口大小时会中断。有任何想法吗?这是相关的代码。
<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>
谢谢!
答案 0 :(得分:7)
使用flexbox utils和/或自动边距。例如,您可以设置.card-body
display:flex
(d-flex flex-column
)和margin-top:auto
(mt-auto
)来按下按钮...
https://www.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>
相关问题:
Bootstrap - align button to the bottom of card
Aligning items within a Bootstrap 4 .card using Flexbox