如何覆盖由Vue.js Router填充的Bootstrap NavBar下拉项的CSS设置

• 自定义ID/类名覆盖局部样式
  你可以直接在目标b-dropdown-item标签上绑定自定义ID或类名，通过该自定义选择器编写样式即可覆盖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="Item" right>
      <!-- 给目标元素添加自定义id dropitem -->
      <b-dropdown-item id="dropitem" class="d-flex flex-column" href="#">
        <router-link class="d-block" 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>

对应CSS代码：

#dropitem {
  width: 200px;
}

注意：如果样式写在Vue单文件组件带scoped属性的style块内，需要添加深度选择器才能生效，Vue2用::v-deep，Vue3用:deep()，示例：

/* Vue2 写法 */
::v-deep #dropitem {
  width: 200px;
}

/* Vue3 写法 */
:deep(#dropitem) {
  width: 200px;
}

• 全局覆盖所有下拉项样式
  如果需要修改全站所有b-dropdown-item的默认样式，直接覆盖Bootstrap原生的.dropdown-item类即可：

.dropdown-item {
  /* 自定义样式 */
}

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