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 class 添加到容器中，然后将基线添加到第二行，它正好位于屏幕顶部。对于上下文，我将提供 header class 以防万一我遗漏了什么

.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 行之间有一个相等的 space。如果是这样，也许你可以将它们添加到你的 header css.

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

Bootstrap Vue Flex 布局问题

Bootstrap Vue Flex layout issue

css

twitter-bootstrap

vue.js

bootstrap-vue