b-form-select VUE bootstrap style/CSS 问题

Question

我是 VUE 的新手，但直到现在我已经阅读并尝试了一些建议，但问题仍然存在。

我正在尝试使用这个： Form Select - Bootstrap（如示例）

当我查看我的本地主机页面时，我有：

在我的代码中：

Main.js

import {BootstrapVue, IconsPlugin, FormRatingPlugin, FormSelectPlugin  } from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.use(FormRatingPlugin)
Vue.use(FormSelectPlugin)

Vue.component('b-form-select', BFormSelect)

Partner.js

[template]
<b-form-select 
    v-model="selected2" 
    id="socioPack"  
    name="socioPack" 
    :options="options2">
</b-form-select>
<div class="mt-3">Selected: <strong>{{ selected2 }}</strong></div>
</div>


[data()]

selected2: null,
options2: [
    { value: null, text: 'Please select some item' },
    { value: 'a', text: 'This is First option' },
    { value: 'b', text: 'Default Selected Option' },
    { value: 'c', text: 'This is another option' },
    { value: 'd', text: 'This one is disabled', disabled: true }
]

有人可以给我提示吗？

如果需要更多详细信息，请告诉我。

Answer 1

BootstrapVue 是为 Bootstrap 4.

构建的

我的猜测是您错误地安装了 Bootstrap 5，它具有不同的选择语法。

如果您使用 npm 运行 npm install bootstrap@4.5.3 安装最新支持的 Bootstrap 版本，它应该正确显示。

b-form-select VUE bootstrap style/CSS 问题

b-form-select VUE bootstrap style/CSS issue

vue.js

vue-component

bootstrap-vue