如何使用带有 Vue 的 bootstrap 4 创建移动导航栏？答案

【问题标题】：How do I create a mobile navbar using bootstrap 4 with Vue?如何使用带有 Vue 的 bootstrap 4 创建移动导航栏？
【发布时间】：2019-05-01 17:58:49
【问题描述】：

我正在努力使用 vue 的 bootstrap 4 成功创建导航栏。这是我在 App.vue 中的代码：

导航栏

<b-navbar-nav>
  <b-nav-item href="#">Link</b-nav-item>
  <b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>

<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">

  <b-nav-form>
    <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
    <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
  </b-nav-form>

  <b-nav-item-dropdown text="Lang" right>
    <b-dropdown-item href="#">EN</b-dropdown-item>
    <b-dropdown-item href="#">ES</b-dropdown-item>
    <b-dropdown-item href="#">RU</b-dropdown-item>
    <b-dropdown-item href="#">FA</b-dropdown-item>
  </b-nav-item-dropdown>

  <b-nav-item-dropdown right>
    <!-- Using button-content slot -->
    <template slot="button-content">
      <em>User</em>
    </template>
    <b-dropdown-item href="#">Profile</b-dropdown-item>
    <b-dropdown-item href="#">Signout</b-dropdown-item>
  </b-nav-item-dropdown>
</b-navbar-nav>

导航栏在桌面上效果很好，但在移动设备上 navbar-collapse 效果不佳。 NavBar 品牌向左浮动 image of what it looks like

【问题讨论】：

我强烈推荐阅读this post@NickD
人们应该在投反对票之前将其标记为重复或添加一个关于为什么帖子不相关的答案。否则，我认为只是浪费时间，你可以保留你的谢谢
这实际上是基于 Bootstrap-Vue 文档的导航栏的正确行为

标签： html vue.js bootstrap-4 frontend progressive-web-apps

【解决方案1】：

查看 Bootstrap-Vue 文档，似乎其中的问题（以及因此在您的代码上）是标记将 b-navbar-toggle 放在 b-navbar-brand 之前，所以当屏幕缩小按钮出现在品牌之前，导致您看到的结果。只需将b-navbar-toggle 移动到折叠部分的开始标记之前，您就会得到正确的结果。

<b-navbar toggleable="md" type="dark" variant="info">
  <b-navbar-brand href="#">NavBar</b-navbar-brand>

  <!-- Put the toggle here after the brand -->
  <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>

  <b-collapse is-nav id="nav_collapse">

    <b-navbar-nav>
      <b-nav-item href="#">Link</b-nav-item>
      <b-nav-item href="#" disabled>Disabled</b-nav-item>
    </b-navbar-nav>

    <!-- Right aligned nav items -->
    <b-navbar-nav class="ml-auto">

      <b-nav-form>
        <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
        <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
      </b-nav-form>

      <b-nav-item-dropdown text="Lang" right>
        <b-dropdown-item href="#">EN</b-dropdown-item>
        <b-dropdown-item href="#">ES</b-dropdown-item>
        <b-dropdown-item href="#">RU</b-dropdown-item>
        <b-dropdown-item href="#">FA</b-dropdown-item>
      </b-nav-item-dropdown>

      <b-nav-item-dropdown right>
        <!-- Using button-content slot -->
        <template slot="button-content">
          <em>User</em>
        </template>
        <b-dropdown-item href="#">Profile</b-dropdown-item>
        <b-dropdown-item href="#">Signout</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-navbar-nav>

  </b-collapse>


</b-navbar>

【讨论】：