Div底部在列中对齐

Question

我正在使用具有四列布局的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>

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

Answer 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://www.codeply.com/go/B1vKo06A3i

Answer 2

选项1：具有列流功能并使用margin的flexbox：自动按下按钮

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

选项2：带有文本溢出

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

CSS

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

结果

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