Bootstrap Navbar用v-for绑定菜单项时下拉内横向而非纵向排列如何解决

你出现布局问题的核心原因是将所有<router-link>循环渲染在了同一个<b-dropdown-item>组件内，多个行内/行内块元素在同一容器内默认会横向排列。

最优修改方案 #

将v-for循环绑定到<b-dropdown-item>组件上，让每个路由对应一个独立的下拉项，BootstrapVue默认会为下拉项设置纵向堆叠的块级样式，同时可以直接用组件自带的as属性指定渲染为router-link，省去嵌套的同时自带交互样式，修改后的代码如下：

<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 as="router-link" class="links" 
        v-for="routes in links"
        v-bind:key="routes.id"
        :to="routes.page">
        {{routes.text}}
      </b-dropdown-item>
    </b-nav-item-dropdown>

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

可选兼容方案 #

如果希望保留原嵌套写法，只需要给你定义的.links类添加以下CSS即可实现纵向排列：

.links {
  display: block;
  width: 100%;
}

内容的提问来源于stack exchange，提问作者JF0001