Bootstrap 4 Flexbox - Выровнять несколько столбцов по центру элементов - PullRequest
Новая
       69

Bootstrap 4 Flexbox - Выровнять несколько столбцов по центру элементов

1 голос
/ 30 мая 2020

У меня есть 3 столбца, которые я пытаюсь центрировать по вертикали относительно области просмотра. Столбцы должны быть полной ширины - без встроенных. Я хочу, чтобы они располагались вертикально, как в моем коде, только с помощью 'align-items-center', чтобы все три центрировались вертикально по отношению к области просмотра.

Проверьте this . 

<div class="container-fluid" style="border: 3px solid red;">
<div class="row min-vh-100" style="border: 4px solid blue;">
    <div class="col" style="border: 3px solid yellow;">
        <div class="flex-column align-items-center p-2" style="border: 4px solid orange;">Flex item 1</div>
        <div class="flex-column p-2" style="border: 4px solid orange;">Flex item 1</div>
        <div class="flex-column p-2" style="border: 4px solid orange;">Flex item 1</div>
    </div>
</div>

1 Ответ

1 голос
/ 30 мая 2020

Попробуйте вот это. Вы использовали гибкий столбец для внутренних элементов, но он должен быть гибким, и вам не хватает класса d-flex в контейнере. Проверьте это, чтобы получить лучшее представление: https://getbootstrap.com/docs/4.4/utilities/flex/

<div class="container-fluid" style="border: 3px solid red;">
    <div class="row min-vh-100" style="border: 4px solid blue;">
        <div class="col d-flex flex-column justify-content-center" style="border: 3px solid yellow;">
            <div class="p-2" style="border: 4px solid orange;">Flex item 1</div>
            <div class="p-2" style="border: 4px solid orange;">Flex item 1</div>
            <div class="p-2" style="border: 4px solid orange;">Flex item 1</div>
        </div>
    </div>
</div>
...