div 底部在列中对齐答案

【问题标题】：Div bottom aligned in columndiv 底部在列中对齐
【发布时间】：2021-09-07 19:20:25
【问题描述】：

我正在使用具有四列布局的 Bootstrap 4。现在我有一列文本较长，导致末尾的“按钮”未对齐。

HTML如下：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <div class="container">
        <div class="row mt-4">
            <div class="col-lg-12 title-1 text-center">
                My Headline
            </div>
        </div>
        <div class="row py-5">
            <div class="col-lg-3">
                <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
                <div class="text-center title-4 volume">lorem</div>
                <hr>
                <div class="text-center title-2">
                    Just a test
                </div>
                <div class="button-1 text-center title-3">
                        MORE INFOS
                </div>
            </div>
            <div class="col-lg-3 mt-lg-0 mt-5">
                <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
                <div class="text-center title-4 volume">lorem</div>
                <hr>
                <div class="text-center title-2">
                    This is longer text which causes the issue
                </div>
                <div class="button-1 text-center title-3">
                        MORE INFOS
                </div>
            </div>
            <div class="col-lg-3 mt-lg-0 mt-5">
                <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
                <div class="text-center title-4 volume">lorem</div>
                <hr>
                <div class="text-center title-2">
                        Just a test
                </div>
                <div class="button-1 text-center title-3">
                        MORE INFOS
                </div>
            </div>
            <div class="col-lg-3 mt-lg-0 mt-5">
                <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
                <div class="text-center title-4 volume">lorem</div>
                <hr>
                <div class="text-center title-2">
                        Just a test
                </div>
                <div class="button-1 text-center title-3 align-self-end">
                    MORE INFOS
                </div>
            </div>
        </div>
    </div>

那么我该怎么做才能使所有列的“按钮”对齐？

【问题讨论】：

你想对溢出的文本做什么？
你可以让 cols 弯曲，然后添加 flex-grow:1;到 title-2 div：bootply.com/0ubMQ6rCnG 不确定这是否适用于 ie 或 safari，尽管我知道它们在嵌套弹性框方面存在问题
@sebseb24 不确定我是否理解正确，但文字应该保持原样。只是其他列的按钮应该向下移动。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

使列 flexbox (d-flex flex-column)，然后使用mt-auto 将按钮推到底部...

<div class="container">
    <div class="row mt-4">
        <div class="col-lg-12 title-1 text-center">
            My Headline
        </div>
    </div>
    <div class="row py-5 border">
        <div class="col-lg-3 d-flex flex-column">
            <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
            <div class="text-center title-4 volume">lorem</div>
            <hr>
            <div class="text-center title-2">
                Just a test
            </div>
            <div class="button-1 text-center title-3 mt-auto">
                    MORE INFOS
            </div>
        </div>
        <div class="col-lg-3 mt-lg-0 mt-5  d-flex flex-column">
            <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
            <div class="text-center title-4 volume">lorem</div>
            <hr>
            <div class="text-center title-2">
                This is longer text which causes the issue
            </div>
            <div class="button-1 text-center title-3 mt-auto">
                    MORE INFOS
            </div>
        </div>
        <div class="col-lg-3 mt-lg-0 mt-5  d-flex flex-column">
            <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
            <div class="text-center title-4 volume">lorem</div>
            <hr>
            <div class="text-center title-2">
                    Just a test
            </div>
            <div class="button-1 text-center title-3 mt-auto">
                    MORE INFOS
            </div>
        </div>
        <div class="col-lg-3 mt-lg-0 mt-5  d-flex flex-column ">
            <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
            <div class="text-center title-4 volume">lorem</div>
            <hr>
            <div class="text-center title-2">
                    Just a test
            </div>
            <div class="button-1 text-center title-3  mt-auto">
                MORE INFOS
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/B1vKo06A3i

【讨论】：

【解决方案2】：

选项 1：带有列流的 flexbox 并使用边距：自动按下按钮

这是@Zim 发布的答案（他很快！）

选项 2：使用文本溢出

另一个没有 flexbox 的选项是在文本上设置文本溢出样式。您可以在 title-2 类上使用 text-overflow 以确保标题只有 1 行。

CSS

.title-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

结果

http://jsfiddle.net/aq9Laaew/261632/

【讨论】：