Bootstrap 4卡-在底部对齐内容 [英] Bootstrap 4 cards - align content at the bottom

问题描述

我有一组引导卡，这些引导卡放在一个卡组中，这意味着它们的宽度和高度都相同.每张卡的内容高度不同，我需要在每张卡的底部对齐一个按钮(不是卡的页脚，我在那里还有其他内容).我尝试在每张卡中添加人造"空白，以便它们都匹配，但是在调整窗口大小时会中断.有任何想法吗?这是相关的代码.

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>

谢谢！

推荐答案

使用> flexbox实用程序 和/或自动边距.例如，您可以使.card-body display:flex(d-flex flex-column)和margin-top:auto(mt-auto)向下按下按钮...

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>

相关问题:
Bootstrap-将按钮对准卡的底部
使用Flexbox在Bootstrap 4 .card中对齐项目

Related questions:
Bootstrap - align button to the bottom of card
Aligning items within a Bootstrap 4 .card using Flexbox

这篇关于Bootstrap 4卡-在底部对齐内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！