底列对齐

Question

我使用的引导带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

使列挠曲盒(d- flexbox列)，然后使用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

Answer 2

选项1:带有列流和使用边距的柔性箱:自动按下按钮

“这就是答案，”Zim贴出(他跑得很快！)

选项2:带有文本溢出

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

CSS

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

结果

​

​

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