Загрузка файла формы Bootstrap-vue не имеет стиля, но есть у других компонентов?

Используя пример, представленный здесь: 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
person cbll    schedule 24.07.2018    source источник
comment
Вы когда-нибудь исправляли эту проблему? Я застрял с той же проблемой.   -  person DinosaurHunter    schedule 11.12.2018
comment
Тот же вопрос здесь   -  person ucipass    schedule 16.06.2019
comment
Вы загружаете bootstrap-vue/dist/bootstrap-vue.css файл в свой проект?   -  person Troy Morehouse    schedule 06.07.2019
comment
А также убедитесь, что вы также используете CSS Bootstrap v4.3.1.   -  person Troy Morehouse    schedule 09.07.2019

Ответы (3)


arrow_upward
1
arrow_downward

Я просто решаю ту же проблему, устанавливая рекомендованную версию Bootstrap. Команда на официальном веб-сайте установит последнюю версию (5.0.2 в то время, когда я пишу это), что несовместимо с bootstrap-vue.

yarn remove bootstrap
yarn add [email protected]
person OrdosX    schedule 14.07.2021

arrow_upward
0
arrow_downward

Этот фрагмент работает, просто проверьте свои версии bootstrap-vue и bootstrap-vue-css с помощью фрагмента. Вероятно, ваша проблема связана с использованием более старой версии b-vue.

new Vue({
  el: "#app",
});
body {
  padding: 2rem
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>

person Iman Shafiei    schedule 18.04.2021

arrow_upward
-1
arrow_downward

Тот же вопрос ко мне, но теперь я решил.

пример кода документа 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/[email protected]/dist/css/bootstrap.min.css) в src / assets / boostrap.min.css

затем вместо import 'bootstrap/dist/css/bootstrap.css' на import './assets/bootstrap.min.css'

наконец то работает!

person tomoya92    schedule 10.07.2021