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

这个问题很奇怪，但我似乎无法找到任何有效的原因来解释为什么会发生这种情况。

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

我有几个单选按钮，当我希望它们出现在引导程序文档中时，其中有一个通用的单选按钮。奇怪的按钮。

预期：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>

导入 boostrap 就像在 main.js 文件中一样。现在奇怪的是，除了使用 $bvToast 创建 toast 消息时，所有样式都有效，但这将是一个单独的问题。

进口助推器：

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)

任何想法都是最受欢迎的！