Bootstrap-vue 导航栏未按预期呈现答案

【问题标题】：Bootstrap-vue navbar not rendering as expectedBootstrap-vue 导航栏未按预期呈现
【发布时间】：2021-09-16 17:00:49
【问题描述】：

我正在使用 bootstrap-vue 并尝试在应用程序中创建导航栏组件，我使用的是this link 文档中提供的第一个示例，我已按照引导程序中的说明安装了所有依赖项- vue 指令。我正在尝试将此导航栏用作组件，并使用以下代码来创建和呈现它。

Navbar.vue

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

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <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" placeholder="Search"></b-form-input>
          <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 #button-content>
            <em>User</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>
</template>

<script>
export default {
  name: 'NavBar',
  data () {
    return {}
  }
}
</script>

和

App.vue

 <template>
      <div>
        <NavBar></NavBar>
        <div id="app">
          <router-view />
        </div>
      </div>
    </template>
    
    <script>
    import NavBar from '@/components/NavBar'
    
    export default {
      components: {
        NavBar: NavBar
      },
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

预期输出与我的结果

期望

要查看预期输出，请关注this link

结果

我没有足够的声誉来发布图片，但如果需要进一步得出结论，我可以上传屏幕截图，基本上导航栏发生的事情是它渲染得很好，很明显引导程序的某些元素工作（例如下拉菜单和搜索栏）但是，navbar.vue 第 15 行的 ml-auto 对具有其类的导航栏项目没有任何影响。导航栏项目都聚集在左侧，还有一些奇怪的边距错误。我发现了一个类似的堆栈溢出问题，并通过用ms 替换它来成功解决ml 不工作的问题，但无法在文档中找到它让我厌倦了使用它作为解决方案，它也没有t 停止搜索栏和搜索按钮的奇怪聚集。如果一切配置正确，代码应该像示例中那样运行，因为它适用于引导文档的 playground 组件。

其他 stackoverflow 文章

还有另一篇 stackoverflow 文章讨论了 ml-auto 如何在 bootstrap 5 中不起作用，以及如何使用 ms-auto 但是我没有在 bootstrap 5 中找到任何 ms 类的文档。

要阅读那篇文章，请关注this link

【问题讨论】：

Bootstrap-vue 不适用于 bs5：“BootstrapVue 拥有超过 85 个组件、超过 45 个可用插件、多个指令和 1200 多个图标，它提供了 Bootstrap v4 组件最全面的实现之一和网格系统可用于 Vue.js v2.6"
非常感谢！一直在挠头好几个小时。降级到 4.6.0 是解决方案。

标签： javascript vue.js bootstrap-vue bootstrap-5

【解决方案1】：

根据我的评论 - Bootstrap-vue 不适用于 bs5：“BootstrapVue 拥有超过 85 个组件、超过 45 个可用插件、多个指令和 1200 多个图标，它提供了 Bootstrap 最全面的实现之一v4 组件和网格系统可用于 Vue.js v2.6"

来自https://bootstrap-vue.org/

【讨论】：