时间戳

首页 > 解决方案 > 引导样式未正确应用于应用程序中的所有元素

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

问题描述

这个问题很烦人，但我似乎找不到任何正当理由来解释为什么会发生这种情况。

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

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

预期： 预期结果

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

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

代码片段：

<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)

欢迎任何想法！

标签： cssvue.jsbootstrap-4bootstrap-vue

解决方案

正如对问题的评论中提到的，您已经安装了 Bootstrap 5，而 BootstrapVue 不是为它构建的。

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

推荐阅读