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

Posted 2023-02-22

【中文标题】引导样式未正确应用于应用程序中的所有元素

【英文标题】：Bootstrap styling not properly applying to all elements within an application

【发布时间】：2021-08-23 08:31:26

【问题描述】：

这个问题非常烦人，但我似乎找不到任何正当理由说明为什么会发生这种情况。

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

我有几个单选按钮，其中有一个通用单选按钮，当我希望它们出现在引导文档中时。 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>

导入 boostrap 的方式与通常在 main.js 文件中一样。现在奇怪的是，除了使用 $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)

欢迎提出任何想法！

【问题讨论】：

你安装了哪个版本的 Bootstrap？

已安装："bootstrap": "^5.0.1" "bootstrap-vue": "^2.21.2"

BootstrapVue 还不支持 Bootstrap 5，所以如果您降级到 Bootstrap 4.5.3，它应该看起来像预期的那样。

确实如此！非常感谢你！如果您想发表您的评论作为答案，我可以接受。

【参考方案1】：

正如问题中的 cmets 中所述，您已安装 Bootstrap 5，而 BootstrapVue 不是为它构建的。

如果您改为安装 Bootstrap 版本 4.5.3（BootstrapVue 2.21.2 支持的最新版本），它应该会正确显示。