Vue-bootstrap 卡不显示登机答案

【问题标题】：Vue-boostrap cards do not show the boardingVue-bootstrap 卡不显示登机
【发布时间】：2020-06-29 15:24:58
【问题描述】：

我最近切换到 Vue-bootstrap。我写了以下代码：

<div>
    <div class="col-sm-3">
        <b-card no-body class="mb-1" border-variant="primary">
            <b-card-header header-tag="header" class="p-1" role="tab">
                <b-button block disabled href="#" v-b-toggle.accordion-1 variant="info">Search:</b-button>
            </b-card-header>
            <b-collapse id="accordion-1" visible accordion="my-accordion" role="tabpanel">
                <b-card-body>
                    Why it works?
                </b-card-body>
            </b-collapse>
        </b-card>
    </div>
</div>

如果我将它插入到我得到的live 中：

它包含一个边框。如果我在本地运行相同的代码（文本除外），我会得到：

为什么会这样？

在我的 webpack 中，我正确编译：

 {
   // compile css files (basically, bootstrap)
   test: /\.css$/,
   use: ['style-loader', 'vue-style-loader', 'css-loader']
}

我在 main.js 和 App.vue 中都有：

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

【问题讨论】：

“我在 main.js 和 App.vue 中也有” 为什么是两个文件而不是 main.js？
另外，我使用 Bootstrap v4.x.x 检查了您的代码，正如您在文档中看到的那样。但是，如果我使用 Bootstrap v3.4.1，它会显示为您的屏幕截图（缺少边框）。最近的 Bootstrap-Vue 只支持 Bootstrap v4.3.1 及以上版本。
@Hiws，这实际上是正确的解决方案。欢迎您将其显示为答案。
其中有哪些？双重导入还是使用较旧的引导程序版本？
第一版。第一种方法是试图解决这个问题。

标签： javascript css vue.js vuejs2 bootstrap-vue

【解决方案1】：

问题是您可能正在使用引导程序v3.x.x，Bootstrap-Vue 有一段时间不支持。当前版本（v2.7.0）仅支持Bootstrapv4.3.1及以上版本。

【讨论】：