Bootstrap 4 卡片 - 在底部对齐内容

Posted 2023-03-05

【中文标题】Bootstrap 4 卡片 - 在底部对齐内容

【英文标题】：Bootstrap 4 cards - align content at the bottom

【发布时间】：2018-08-29 07:54:09

【问题描述】：

我有一组引导卡放在一个卡组中，这意味着它们都具有相同的宽度和高度。每张卡片的内容高度不同，我需要在每张卡片底部对齐一个按钮（不是卡片的页脚，我还有其他内容）。我尝试在每张卡片中添加“人工”空格，以便它们都匹配，但是在调整窗口大小时会中断。有任何想法吗？这是相关代码。

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

谢谢！

【问题讨论】：

您是否尝试添加填充？

【参考方案1】：

使用flexbox utils 和/或自动边距。例如，您可以让.card-bodydisplay: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>

相关问题：Bootstrap - align button to the bottom of cardAligning items within a Bootstrap 4 .card using Flexbox