BootstrapVue лучший способ выровнять содержимое по вертикали? - PullRequest
Новая
       6

BootstrapVue лучший способ выровнять содержимое по вертикали?

0 голосов
/ 29 апреля 2020

Есть ли оптимальный способ выровнять мой контент по вертикали? У меня есть 3 кнопки, которые я хочу выровнять по вертикали. 

        <b-container>
            <b-row>
                <b-col><b-button class="main-navigation-button" variant="primary">Create</b-button></b-col>
                <b-col><b-button class="main-navigation-button" variant="primary">Search</b-button></b-col>
                <b-col><b-button class="main-navigation-button" variant="primary">Edit</b-button></b-col>
            </b-row>
        </b-container>

Ответы [ 2 ]

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

Следующие действия помогут вам: 

<b-container>
  <b-row class="vh-100 text-center" align-v="center">
    <b-col><b-button class="main-navigation-button" variant="primary">Create</b-button></b-col>
    <b-col><b-button class="main-navigation-button" variant="primary">Search</b-button></b-col>
    <b-col><b-button class="main-navigation-button" variant="primary">Edit</b-button></b-col>
  </b-row>
</b-container>

Класс vh-100 устанавливает высоту строки равной 100% высоты области просмотра, а мы устанавливаем опору align-v в center (центрирует колонки вертикально в середине ряда). Класс text-center выравнивает кнопку по центру столбцов.

1 голос
/ 29 апреля 2020

Flex - это способ легко выровнять элементы. 

<div class="d-flex flex-row">
  <div class="p-2">
    <b-button class="main-navigation-button" variant="primary">Create</b-button>
  </div>
  <div class="p-2">
    <b-button class="main-navigation-button" variant="primary">Search</b-button>
  </div>
  <div class="p-2">
    <b-button class="main-navigation-button" variant="primary">Edit</b-button>
  </div>
</div>

https://getbootstrap.com/docs/4.1/utilities/flex/

...