Bootstrap-vue: 改变b-下拉按钮的大小

Question

我们在我们的应用程序中实现了 bootstrap-vue，并使用了 b-dropdown。

我们如何更改按钮大小？我们想将按钮大小更改为 btn-sm

下面是代码，它没有改变按钮的大小

<b-dropdown-item-btn button="btn-sm primary" right id="dropdown-1" class="m-md-2" style="display: inline;">

<i class="fa fa-gear"></i>

<b-form-select v-model="accounting_period_1" :options="accounting_period_options" @change="filterRevenueAndCosts()">
    
</b-form-select>

问题：如何改变按钮的大小？

Answer 1

UPDATE：这是将 b-dropdown 与 b-dropdown-item 一起使用后的样子 - 将大小设置为 sm 并设置你的 class.

以下是实现该目标的方法：（我认为我不必解释我所做的事情）

在你的模板中像这样：

<div>
  <div>
    <b-dropdown size="sm" class="lang-dropdown" no-caret variant="light">
      <b-dropdown-item>
        Item 1
      </b-dropdown-item>
      <b-dropdown-item>
        Item 2
      </b-dropdown-item>
    </b-dropdown>
  </div>
</div>

喜欢这样的风格：

.lang-dropdown .dropdown-menu { //you can also seperate these
   min-width: 4rem; //set your width here
}

请告诉我这是否适合您！

Bootstrap-vue: 改变b-下拉按钮的大小

Bootstrap-vue: Change size of b-dropdown button

vue.js

bootstrap-vue