bootstrapVue 单选按钮组以堆叠模式而不是默认内联模式呈现

Question

我使用 bootstrapVue 版本 2.21.2 和 bootstrap 版本 5.1.3。

此 bootstrapVue 版本在标签默认生成内联无线电输入， https://bootstrap-vue.org/docs/components/form-radio#inline-or-stacked-radios

但是在我的项目中都是以堆叠方式生成的：

<b-col>
  <b-form-group label="Con quota sociale" v-slot="{ ariaDescribedby }">
    <b-form-radio-group
     v-model="filterQuotaSelected"
     :aria-describedby="ariaDescribedby"
     name="filter-quota">
     <b-form-radio value="">ignora</b-form-radio>
     <b-form-radio value="N">non in regola</b-form-radio>
     <b-form-radio value="S">in regola</b-form-radio>
    </b-form-radio-group>
  </b-form-group>
</b-col>

browser render

如何内联渲染？有什么想法吗？

Answer 1

几步之后我解决了问题。

插件版本问题

BootstrapVue v.2.21.x 旨在与 bootstrap v4.5.3 互操作，设置我的项目文件夹，安装程序默认已下载最新版本 5.x bootstrap 不兼容。

解决步骤...

更改文件“package.json”，将依赖对象中的“bootstrap”：“^5.x”替换为

"dependencies": {
    "bootstrap": "4.5.3",
...
}

在文件夹项目中运行

npm update

bootstrapVue 单选按钮组以堆叠模式而不是默认内联模式呈现

bootstrapVue radio-button-group are rendered in stacked mode instead in default inline mode

forms

inline

stacked

vue.js