在 Bootstrap 导航栏中使用 v-for 绑定项目时，菜单项水平堆叠而不是垂直堆叠

Question

我正在使用 Bootstrap 4 和 vue.js 路由器。我创建了以下 Bootstrap 导航栏：

<b-navbar toggleable="lg" type="light" variant="white">
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
  <b-navbar-nav class="ml-auto">

    <b-nav-item-dropdown text="Dropdown" right>
      <b-dropdown-item href="#">
        <router-link class="links" v-for="routes in links"
        v-bind:key="routes.id"
        :to="`${routes.page}`">{{routes.text}}</router-link>
      </b-dropdown-item>
    </b-nav-item-dropdown>

  </b-navbar-nav>
</b-collapse>

我也定义了如下路由：

      links: [
    {
      id: 1,
      text: 'Item1',
      page: '/Item1'
    },
    {
      id: 2,
      text: 'Item2',
      page: '/Item2'
    },
    {
      id: 3,
      text: 'Item3',
      page: '/Item3'
    }
  ]

一切正常，但是项目全部水平显示在一行中，而不是在我的下拉列表中垂直堆叠。我该如何更改？

Answer 1

你需要在 flex column 方向上设置东西使用 css 或使用 bootstrap-vue 的网格系统

可以做两件事

<b-dropdown-item class="vertical-container" href="#">
   <router-link class="links" v-for="routes in links"
     v-bind:key="routes.id"
     :to="`${routes.page}`">{{routes.text}}</router-link>
</b-dropdown-item>

.vertical-container {
 display: flex;
 flex-direction: column;
 gap: 1rem;
}
.vertical-container > * {
 display: block;
}

或者您可以使用 bootstrap 的实用程序 class （推荐） flex-column

<b-dropdown-item class="d-flex flex-column" href="#">
   <router-link class="links d-block" v-for="routes in links"
     v-bind:key="routes.id"
     :to="`${routes.page}`">{{routes.text}}</router-link>
</b-dropdown-item>

在 Bootstrap 导航栏中使用 v-for 绑定项目时，菜单项水平堆叠而不是垂直堆叠

Menu Items being stacked Horizontally instead of Vertically when binding Items with v-for in Bootstrap Navbar

navbar

vue.js

bootstrap-4

vue-router