Bootstrap Vue Flex 布局问题

Question

我正在尝试使用 bootstrap vue 让 div 位于具有 100vh 的容器的基线上，我查看了文档并实施了他们的建议，但 div 没有移动。

<b-container fluid class="header bv-example-row bv-example-row-flex-cols">
      <b-row class="viewport-header" align-v="start">
        <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 align-v="baseline">
        <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>

所以你可以看到我将 flex cols 类添加到容器中，然后将基线添加到第二行，它恰好位于屏幕顶部。对于上下文，我将提供标头类，以防我遗漏了一些东西

.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;
 }

Answer 1

我不太确定你想要实现什么。我猜你想在第 1 行和第 2 行之间有一个相等的空间。如果是，也许你可以将这些添加到你的标题 css 中。

.header {
    ...your css
    display: flex;
    flex-direction: column;
    justify-content: space-between;
 }