Неравная высота колонны с bootstrap4 Flex - PullRequest
Новая
       16

Неравная высота колонны с bootstrap4 Flex

0 голосов
/ 14 мая 2018

Я использую Boostrap4 и пытаюсь создать простую сетку 4 * 4 div, в которой есть изображение и текст.Сначала я попытался использовать 6 столбцов, вложенных в одну строку, и это выглядело следующим образом:

enter image description here

Так что проблема заключается в том, что картинка нене в центре колонны.Итак, затем я использовал text-center в строке.Это сработало, но теперь текст также центрируется, когда я хочу, чтобы он был выровнен по левому краю изображения:

enter image description here

Таким образом, я закончил удаление всехот этого избавились от строк и столбцов начальной загрузки и попытались использовать классы flex начальной загрузки.Это имеет общую структуру: 

<div class="d-flex justify-content-around">
    <div class="d-flex flex-column">
        <div> image and text content here </div>
    </div>
</div>

Теперь это работает хорошо, за исключением того, что, поскольку высота столбцов может изменяться, строка не выглядит выровненной:

enter image description here

Как это исправить?Что является лучшей практикой, когда вы пытаетесь создать сетку из div, как это, используя bootstrap4.

Так как кто-то хотел увидеть весь код.

<div class="row border justify-content-around border-r flex-wrap">
                    <div class="d-flex flex-column border-r"> <!-- this is repeated twice more for each column -->
                        <div class="tile">
                            <a href="./wanderlust.html">
                                <img class ="thumbnail img-fluid" src ="images/wanderlust.jpg"/>
                                <h5 class=" thumbnail-title"> Wanderlust </h5>
                                <p class=" thumbnail-subtitle"> design research + UX + UI <br> +  programming </p>
                            </a>
                        </div>
                        <div class="tile">
                            <a href ="behavior-change.html">
                                <img class ="thumbnail img-fluid" src ="images/breakfast.jpg">
                                <h5 class="thumbnail-title"> Behavior Change </h5>
                                <p class="thumbnail-subtitle"> design research</p>
                            </a>
                        </div>
                    </div>
</div>

1 Ответ

0 голосов
/ 14 мая 2018

Вы должны использовать row и col-* s и выровнять img s по центру столбцов, используя классы d-block и mx-auto. 

<img class="thumbnail img-fluid d-block mx-auto" src="images/wanderlust.jpg" />

d-block устанавливает его отображение на block, а mx-auto устанавливает его margin-left и margin-right на auto.

...