在bootstrap-vue中折叠时如何隐藏导航栏

Question

我使用bootstrapvue，并且寻求CSS唯一的解决方案，以便在折叠时在导航栏中隐藏文本。我找到了.d-none .d-sm-block，但是当切换器折叠导航时它们没有作用。我只找到了jQuery解决方案，但它们不能与bootstrap的vue包装器一起使用。

  <b-navbar toggleable="sm" type="dark" variant="dark">
    <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 class="d-inline-flex flex-column .d-none .d-sm-block">
        <h2><b-nav-text class="text-white">{{ $t('app.name') }}</b-nav-text></h2>
        <b-nav-text class="text-white">{{ $t('app.slogan') }}</b-nav-text>
      </b-navbar-nav>

      <b-navbar-nav class="ml-auto">
        <b-nav-item-dropdown v-if="authorized" toggle-class="text-warning" right>
          <template v-slot:button-content>
            <b-icon-person-fill font-scale="2"></b-icon-person-fill>
          </template>
          <b-dropdown-item :to="{ name: 'user-profile', params: { id: userId } }">{{ $t('app.my-profile') }}</b-dropdown-item>
        </b-nav-item-dropdown>
        <b-nav-item-dropdown v-if="authorized" toggle-class="text-warning" right>
          <template v-slot:button-content>
            <b-icon-info font-scale="2"></b-icon-info>
          </template>
          <b-dropdown-item :to="{ name: 'help'}">{{ $t('app.help') }}</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>

Answer 1

这是解决方案。与Flex模型可能存在一些冲突。

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav class="d-none d-sm-block">
        <div class="d-inline-flex flex-column">
          <h2><b-nav-text class="text-white">{{ $t('app.name') }}</b-nav-text></h2>
          <b-nav-text class="text-white">{{ $t('app.slogan') }}</b-nav-text>
        </div>
      </b-navbar-nav>