引导导航栏中的多行

Question

我正在使用bootstrap-vue。我尝试将现有标头转换为导航栏。下方应有一个大品牌名和一个较小的口号。我尝试将H1和b-nav-text与BR一起使用，但两个文本始终并排呈现。如何将标语放在品牌名称下方？

    <b-navbar-brand href="/">
      <img src="./assets/logo.png" :alt="$t('app.logo-alt')"  class="d-inline-block align-top">
    </b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-text class="text-white">{{ $t('app.name') }}</b-nav-text>
        <br>
        <b-nav-text class="text-white">{{ $t('app.slogan') }}</b-nav-text>
      </b-navbar-nav>

图片的上方是b-nav输出，下面是使用b-container构建的原始标头。

Answer 1

d-inline-flex flex-column

<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
  <b-navbar-nav>
    <b-nav-text class="d-inline-flex flex-column">
      <span>Lorem ipsum is placeholder text commonly used in</span>
      <span>the graphic, print</span>
      </span>
    </b-nav-text>
  </b-navbar-nav>