b-dropdown没有呈现任何css类

Question

我正在使用bootstrap-vue添加<b-dropdown>组件，但该按钮对添加任何css类都没有效果。

这是bootstrap vue组件的错误吗？还是我在添加类时做错了什么？

new Vue({
el: "#vueapp",
data: function() {
return {}
}
})

.btn-circle {
width: 30px;
height: 30px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="vueapp" class="vue-app">
<b-dropdown button-class="btn btn-danger d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle" no-caret>
<template v-slot:button-content>
<i class="fas fa-cog fa-lg"></i>
</template>
<b-dropdown-item href="#">An item</b-dropdown-item>
<b-dropdown-item href="#">Another item</b-dropdown-item>
</b-dropdown>

<button class="btn btn-light d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle ">
<i class="fas fa-plus-circle fa-lg"></i>
</button>
</div>

Answer 1

我使用了错误的道具。所以，我不得不使用toggle-class道具来制作<b-dropdown>。

所以，使用toggle类为我解决了这个问题

new Vue({
el: "#vueapp",
data: function() {
return {}
}
})

.btn-circle {
width: 30px;
height: 30px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="vueapp" class="vue-app">
<b-dropdown toggle-class="btn btn-danger d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle" no-caret>
<template v-slot:button-content>
<i class="fas fa-cog fa-lg"></i>
</template>
<b-dropdown-item href="#">An item</b-dropdown-item>
<b-dropdown-item href="#">Another item</b-dropdown-item>
</b-dropdown>

<button class="btn btn-light d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle ">
<i class="fas fa-plus-circle fa-lg"></i>
</button>
</div>