Выравнивание дна в столбце

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

Вариант 1: flexbox с потоком столбцов и использование поля: авто для нажатия кнопки

Вот ответ @Zim опубликовал (он быстр!)

Вариант 2: с переполнением текста

Еще одна опция без flexbox - вместо этого использовать стилизацию текста для текста. Вы можете использовать text-overflow в своем классе title-2, чтобы заголовок был всего одной строкой.

CSS

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

Результат

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

Answer 2

Сделайте столбцы 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