BootstrapVue中垂直对齐内容的最优方案？含三个按钮对齐场景

嘿，这个问题我太熟啦！在BootstrapVue里实现内容垂直对齐，完全不用折腾自定义CSS，借助它内置的Bootstrap flex布局类就是最优解——既简洁又符合框架规范，兼容性还拉满。针对你要垂直对齐3个按钮的需求，分两种常见场景给你方案：

场景1：按钮高度一致，行内整体垂直居中 #

如果你的按钮高度相同，想要让它们在<b-row>里垂直居中对齐，直接给<b-row>添加align-items-center类就行。因为Bootstrap的行默认是flex容器，这个类会让所有列里的内容在垂直方向（交叉轴）居中。

修改后的代码如下：

<b-container>
  <b-row align-items-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>

场景2：按钮高度不同，或需列内单独垂直对齐 #

如果按钮高度不一样，或者你希望按钮在各自的<b-col>内部垂直居中（比如列本身有固定高度），可以给每个<b-col>添加d-flex align-items-center类，把列转换成flex容器，让内部的按钮垂直居中。

代码示例：

<b-container>
  <b-row>
    <b-col class="d-flex align-items-center"> <!-- 列内垂直居中 -->
      <b-button class="main-navigation-button" variant="primary">Create</b-button>
    </b-col>
    <b-col class="d-flex align-items-center">
      <b-button class="main-navigation-button" variant="primary">Search</b-button>
    </b-col>
    <b-col class="d-flex align-items-center">
      <b-button class="main-navigation-button" variant="primary">Edit</b-button>
    </b-col>
  </b-row>
</b-container>

其他可选对齐方式 #

除了居中，你还可以根据需求替换对齐类：

• align-items-start：内容顶部对齐
• align-items-end：内容底部对齐

这些都是Bootstrap内置的工具类，完全不用自己写额外样式，是最贴合BootstrapVue设计思路的最优方法哦！

内容的提问来源于stack exchange，提问作者Rugo