使用 Bootstrap 在卡片底部对齐按钮
使用 Bootstrap 卡组时遇到的一个常见挑战是当某些卡片具有垂直对齐按钮时，垂直对齐按钮更少的项目。该问题的出现是由于卡片之间的列表长度存在差异。
要解决此问题，您可以使用以下 Bootstrap 4 修饰符类：
HTML 示例：
<div class="card">
<div class="card-body d-flex flex-column">
<ul class="list-group list-group-flush">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
</ul>
<button class="btn btn-primary mt-auto">Button</button>
</div>
</div>小提琴演示：
现场演示请参考以下小提琴：https://jsfiddle.net/IGN7K/
通过实现这些类，您可以确保按钮在所有卡片的底部一致对齐，无论其内容长度如何。
以上是如何对齐不同内容长度的Bootstrap卡片底部的按钮？的详细内容。更多信息请关注PHP中文网其他相关文章！
