javascript - Vue-bootstrap 卡不显示登机

Question

我最近切换到 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';

Answer 1

问题是您可能使用的是 Bootstrap v3.x.x，Bootstrap-Vue 暂时不支持它。当前版本(v2.7.0)仅支持 Bootstrap v4.3.1 及以上版本。