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

【问题标题】：How to hide navbar when collapsed in bootstrap-vue在bootstrap-vue中折叠时如何隐藏导航栏
【发布时间】：2020-09-02 15:50:46
【问题描述】：

我使用 bootstrapvue，并且我寻求 CSS 唯一的解决方案，以便在折叠时在导航栏中隐藏文本。我找到了.d-none .d-sm-block，但是当切换器折叠导航时它们不起作用。我发现只有 jQuery 解决方案，但它们不适用于引导程序的 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>

【问题讨论】：

标签： vue.js bootstrap-4 bootstrap-vue

【解决方案1】：

这就是解决方案。可能与弹性模型有些冲突。

    <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>

【讨论】：