b-下拉不呈现任何CSS类

问题描述

我正在使用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/[email protected]/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>

解决方法

我使用了错误的道具。因此，我不得不为toggle-class使用<b-dropdown>道具。

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

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

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>