文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap-vue表单文件上传没有样式，但其他组件有吗？

问Bootstrap-vue表单文件上传没有样式，但其他组件有吗？
EN

Stack Overflow用户

提问于 2018-07-24 15:19:57

回答 3查看 2.5K关注 0票数 7

使用这里提供的示例：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

javascript

vue.js

bootstrap-vue

回答 3

Stack Overflow用户

发布于 2021-07-14 14:15:11

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

yarn remove bootstrap
yarn add bootstrap@4.5.3

票数 2

Stack Overflow用户

发布于 2021-04-19 04:59:07

这个代码段可以工作，只需用代码段检查您的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>

票数 0

Stack Overflow用户

发布于 2021-07-10 09:38:45

我也有同样的问题，但我现在已经解决了。

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'

它终于可以工作了！

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51492719

复制

相似问题

问Bootstrap-vue表单文件上传没有样式，但其他组件有吗？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap-vue表单文件上传没有样式，但其他组件有吗？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap-vue表单文件上传没有样式，但其他组件有吗？
EN