Bootstrap 4卡片 - 将内容对齐到底部

Question

我有一组使用bootstrap卡片放在一个card-group中，这意味着它们都有相同的宽度和高度。每个卡片的内容高度不同，我需要一个按钮对齐在每个卡片的底部（不是卡片的页脚，我在那里有其他内容）。我尝试在每个卡片中添加“人造”空间以使它们全部匹配，但这在调整窗口大小时会破坏。有什么想法吗？这是相关代码。

<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>

谢谢！

- Gonzalo

---

你尝试添加填充了吗？ - Lakindu Gunasekara

Answer 1

使用flexbox utils和/或自动边距。例如，您可以将.card-body的display属性设置为flex(d-flex flex-column)，并将margin-top属性设置为auto(mt-auto)，以将按钮向下推......

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>

相关问题：
如何使按钮浮动到卡片底部？
如何使用Flexbox对Bootstrap 4的.card中的项目进行对齐？

- Zim