Bootstrap 3, в одном из двух равных столбцов один ряд выровнен по низу, а другой - к верху - PullRequest
Новая
       48

Bootstrap 3, в одном из двух равных столбцов один ряд выровнен по низу, а другой - к верху

0 голосов
/ 30 января 2020

Я использую Bootstrap 3. Задача - сделать два столбца одинаковой высоты. Содержимое первого столбца представляет собой картинку с весом = 100%. Во втором столбце я должен поместить текст, а затем ряд небольших картинок. Картинки в первом и втором столбце должны быть выровнены по низу. Я сделал это с помощью flex. 

<div class="row row-eq-height">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 bottom-column">
        <img src="https://cdn.pixabay.com/photo/2012/09/15/02/22/forest-56930_960_720.jpg" class="img-big" alt="photo">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 bottom-column">
        <div class="row">
            <div class="col-xs-12">
                <div class="row">
                    <h3>mark waugh</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipis cing elit, sed dooing eiusmod tempor incididut labore Ui / Ux, print template.</p>
                </div>
                <div class="row">
                    <div class="col-xs-6 col-md-3">
                        <div class="box">
                                <img src="https://cdn.pixabay.com/photo/2012/09/15/02/22/forest-56930_960_720.jpg" class="img-responsive" alt="photo">
                        </div>
                    </div>
                    <div class="col-xs-6 col-md-3">
                        <div class="box">
                                <img src="https://cdn.pixabay.com/photo/2012/09/15/02/22/forest-56930_960_720.jpg" class="img-responsive" alt="photo">
                        </div>
                    </div>
                    <div class="col-xs-6 col-md-3">
                        <div class="box">
                                <img src="https://cdn.pixabay.com/photo/2012/09/15/02/22/forest-56930_960_720.jpg" class="img-responsive" alt="photo">
                        </div>
                    </div>
                    <div class="col-xs-6 col-md-3">
                        <div class="box">
                                <img src="https://cdn.pixabay.com/photo/2012/09/15/02/22/forest-56930_960_720.jpg" class="img-responsive" alt="photo">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS: 

.img-big {
    width: 100%;
}

.box {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 15%;
    margin-left: -15px;
    bottom: 0;
}

.bottom-column {
    display: flex;
    align-items: flex-end;
}

Есть причина для использования .box (мне нужны подписи, но это не главное).

Проблема в том, что текст во втором столбце должен быть выровнен по верхнему краю левого рисунка = верхней части строки. Это может быть частично исправлено с помощью полей, но это не очень хороший способ. Я попытался добавить еще одну строку во второй столбец между текстом и изображениями, но я не помог. У кого-нибудь есть идеи?

...