bootstrap-vue Form File Upload没有样式，但是其他组件有？答案

【问题标题】：Bootstrap-vue Form File Upload has no styling, but other components have?bootstrap-vue Form File Upload没有样式，但是其他组件有？
【发布时间】：2018-12-31 17:27:55
【问题描述】：

使用此处提供的示例：https://bootstrap-vue.js.org/docs/components/form-file，我没有提供第一个“样式化”示例显示的样式。

尽管我的模板是这样的，但两者都显得“普通”：

<template> 
<div>
  <!-- Styled -->
  <b-form-file v-model="file" :state="Boolean(file)" placeholder="Choose a file..."></b-form-file>
  <div class="mt-3">Selected file: {{file && file.name}}</div>

  <!-- Plain mode -->
  <b-form-file v-model="file2" class="mt-3" plain></b-form-file>
  <div class="mt-3">Selected file: {{file2 && file2.name}}</div>
</div>
</template>

我想我错过了正确加载 css。但是，从bootstrap-vue 复制粘贴其他示例就可以了。按钮使用附加的 JS 事件设置样式 - 所以这似乎不是问题。

为什么 bootstrap-vue 会为其他组件加载 CSS，但显然不是 b-form-file？

【问题讨论】：

你解决过这个问题吗？我遇到了同样的问题。
这里有同样的问题
您是否正在将bootstrap-vue/dist/bootstrap-vue.css 文件加载到您的项目中？
还要确保您使用的是 Bootstrap v4.3.1 CSS。
我遇到了同样的问题，发现我使用的是 bootstrap 5.x。降级到受支持的 bootstrap 4.x 版本确实有所帮助。

标签： javascript vue.js bootstrap-vue

【解决方案1】：

我只是通过安装推荐版本的 Bootstrap 来解决同样的问题。 official website 中的命令将安装与 bootstrap-vue 不兼容的最新版本（我写这篇文章时为 5.0.2）。

yarn remove bootstrap
yarn add bootstrap@4.5.3

【讨论】：

没错，我遇到了同样的问题，降级到 bootstrap@4.x.x 解决了这个问题。

【解决方案2】：

这个 sn-p 工作，只需使用 sn-p 检查您的 bootstrap-vue 和 bootstrap-vue-css 版本。您的问题可能是因为使用了旧版本的b-vue。

new Vue({
  el: "#app",
});

body {
  padding: 2rem
}

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <b-form-file
      placeholder="Choose a file or drop it here..."
      drop-placeholder="Drop file here..."
    ></b-form-file>
  </div>
</div>

【讨论】：

【解决方案3】：

同样的问题，但我现在解决了。

bootstrap-vue 文档代码示例

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

首先下载 bootstrap.min.css(v4.5) (https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css) 到 src/assets/boostrap.min.css

然后将import 'bootstrap/dist/css/bootstrap.css'改为import './assets/bootstrap.min.css'

终于成功了！

【讨论】：