b-dropdown 不呈现任何 CSS 类答案

【问题标题】：b-dropdown is not rendering any css classb-dropdown 不呈现任何 CSS 类
【发布时间】：2020-10-15 04:23:41
【问题描述】：

我正在使用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>

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

我使用了错误的道具。所以，我不得不为<b-dropdown> 使用toggle-class 属性。

所以，使用切换类为我解决了这个问题。

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>

【讨论】：