BootstrapVue 垂直对齐内容的最佳方式？

Question

是否有垂直对齐我的内容的最佳方式？我有 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>

Answer 1

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/

Answer 2

以下应该可以解决问题：

<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>

class vh-100 将行高设置为视口高度的 100%，我们将属性 align-v 设置为 center（将列垂直居中行的中间）。 Class text-center 将按钮居中对齐。

Answer 3

您可以像这样垂直对齐网格元素：

<b-row class="my-1">
  <b-col sm="3" align-self="center">
    123
  </b-col>
  <b-col sm="3" align-self="center">
    456
  </b-col>
</b-row>

对齐可以是start、center或end.

BootstrapVue 垂直对齐内容的最佳方式？

BootstrapVue best way to vertically align content?

twitter-bootstrap

vue.js

bootstrap-vue