css - Bootstrap 样式未正确应用于应用程序中的所有元素

Question

这个问题出奇地烦人，但我似乎找不到任何合理的理由来说明为什么会发生这种情况。

我正在开发一个 super 简单的 Vue 应用程序，我在其中使用 Vue Bootstrap。似乎某些元素没有适当的 Bootstrap CSS 值。

我有几个单选按钮，当我希望它们出现在 Bootstrap 文档中时，它们内部有一个通用单选按钮。 odd buttons .

预期: expected_results

此元素的代码只是文档中的通用模板代码，我之前已多次使用它并获得预期结果。

我没有链接/嵌入任何外部样式表，所有其他样式标签都在所有其他组件内。我不确定这些按钮如何/为什么以这种方式出现。

代码片段:

<template>
  <div>
  <b-form-group
      label="Button style radios with outline-primary variant and size lg"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-radio-group
        id="btn-radios-2"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        button-variant="outline-primary"
        size="lg"
        name="radio-btn-outline"
        buttons
      ></b-form-radio-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: '',
        options: [
          { text: '1 minute', value: '60' },
          { text: '5 minutes', value: '300' },
          { text: '10 minutes', value: '600' }
        ]
      }
    }
  }
</script>

像通常在 main.js 文件中那样导入 boostrap。奇怪的是，除了使用 $bvToast 创建 toast 消息时，所有样式都可以正常工作，但这将是一个单独的问题。

boostrap 的导入:

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import router from './router'
import store from './store'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.use(VueAxios, axios)

欢迎提出任何想法!

Answer 1

如问题的评论中所述，您已经安装了 Bootstrap 5，而 BootstrapVue 并非为此而构建。

如果您改为安装 Bootstrap 版本 4.5.3(BootstrapVue 2.21.2 的最新支持版本)，它应该可以正确显示。