Bootstrap Vue Flex布局下100vh容器元素垂直对齐失效问题咨询

• 对Bootstrap-Vue的垂直对齐属性的适用范围认知有偏差：align-v属性的作用是控制同一b-row内部的所有b-col列的垂直对齐关系，属于行内列的对齐规则，本身没有“把元素推到父容器底部”的能力
• 外层设置了100vh高度的容器没有配置纵向flex布局：b-container默认是块级文档流布局，内部两个b-row会依次靠顶部排布，没有垂直空间的动态分配逻辑
• 依赖的bv-example-row-flex-cols是官方文档的演示专用类，本身不自带“撑满高度、纵向排布子元素”的生产级布局能力，没法实现预期的空间分配效果

1. 给外层带100vh的header容器补全flex布局规则，保留原有背景配置，新增的样式部分如下：

.header {
    background: url('../image/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    /* 新增flex布局配置 */
    display: flex;
    flex-direction: column;
}

2. 清理无效的配置：删掉第二个b-row上不生效的align-v="baseline"属性
3. 用flex原生的空间分配规则实现靠底效果，两种等价可选方案：
   • 给上方放置logo、标题内容的b-row加上flex-grow-1类，让它自动占满容器内除底部元素外的所有剩余垂直空间，自然将下方目标row推到容器最底部
   • 直接给需要靠底的目标b-row加上mt-auto类，利用flex布局中margin-top: auto的特性，自动把元素推到容器最底部

修正后的完整HTML参考：

<b-container fluid class="header">
  <b-row class="viewport-header flex-grow-1">
    <b-col md="12" class="mt-5 text-center">
      <img src="../../image/logo-white.png" alt="" width="25%" />
      <h2 class="text-white" style="text-decoration: underline; margin-top: 10px">
        Friends Like This
      </h2>
      <h2 class="text-white">Out Now</h2>
    </b-col>
  </b-row>
  <b-row class="py-4">
    <b-col md="12" class="text-center">
      <h1>The New Single</h1>
      <b-dropdown id="dropdown-1" text="Listen Now" variant="success" class="m-md-2">
        <b-dropdown-item>First Action</b-dropdown-item>
        <b-dropdown-item>Second Action</b-dropdown-item>
        <b-dropdown-item>Third Action</b-dropdown-item>
        <b-dropdown-divider></b-dropdown-divider>
        <b-dropdown-item active>Active action</b-dropdown-item>
        <b-dropdown-item disabled>Disabled action</b-dropdown-item>
      </b-dropdown>
    </b-col>
  </b-row>
</b-container>

• 不要混淆对齐类和布局类的适用边界：所有带align-*前缀的类，都是用于定义flex容器内同一行内的元素对齐关系，实现跨元素的上下靠底、靠顶排布效果，需要依托flex的空间分配规则、auto边距实现
• 生产环境尽量避免使用Bootstrap-Vue官方文档自带的演示类，这类类的样式没有做生产场景的兼容和长期维护约束，自定义的flex规则可控性更强

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