b-form-select VUE 引导样式/CSS 问题

Posted 2023-02-23

【中文标题】b-form-select VUE 引导样式/CSS 问题

【英文标题】：b-form-select VUE bootstrap style/CSS issue

【发布时间】：2021-10-21 02:00:14

【问题描述】：

我是 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 
]

有人可以给我小费吗？

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

【参考方案1】：

BootstrapVue 是为 Bootstrap 4 构建的。

我猜你错误地安装了 Bootstrap 5，它的选择语法不同。

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

【讨论】：

在运行 de NPM 之前，还有一个问题。但其他一切正常。这个“改变”只在 Selects sintax 上？

没有。有很多东西会有所不同。您可以在 V5 中阅读更多内容migration guide

感谢您的回答。 NPM 命令解决了这个问题。验证输入表单/选择表单的任何建议？

这是正确答案。我记得我以前遇到过这个问题，这个答案让我想起了。我很惊讶 BootstrapVue 官方文档中甚至没有提到这一点