引导Vue Flex布局问题

Question

我试着让一个div坐在一个容器的基线上，上面有100 at，我已经看了这些文档并实现了它们所建议的，但是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类添加到容器中，然后将基线添加到第二行，它正好位于屏幕顶部。对于上下文，我将提供标题类，以防我遗漏了什么

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