Bootstrap-Vue表单文件上传没有样式，但是其他组件有样式吗？

Question

使用此处提供的示例：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，但显然不会加载CSS b-form-file？

Answer 1

此代码片段有效，只需使用该代码片段检查您的 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>