bootstrap vue 下拉菜单没有样式

Posted 2023-02-16

【中文标题】bootstrap vue 下拉菜单没有样式

【英文标题】：bootstrap vue dropdown no styling

【发布时间】：2021-09-17 09:44:05

【问题描述】：

查看文档

https://bootstrap-vue.org/docs/components/dropdown#button-content

我做了一个使用b-dropdown的例子：

https://codesandbox.io/s/6lhk6?file=/src/components/GenericItem.vue

但在组件中，

<template>
     <div>
      <b-dropdown id="dropdown-1" text="Item or Category" class="m-md-2">
        <b-dropdown-item>Edit Name</b-dropdown-item>
        <b-dropdown-item>Delete</b-dropdown-item>
      </b-dropdown>
    </div>
</template>

呈现为：

为什么不应用样式？

【参考方案1】：

没有关于引导程序未被导入的警告真是太好了；

通过添加修复：

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

致main.js

import Vue from "vue";
import App from "./App.vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.config.productionTip = false;


new Vue(
  render: h => h(App)
).$mount("#app");