Bootstrap Vue - 更改下拉背景

Posted 2023-05-08

【中文标题】Bootstrap Vue - 更改下拉背景

【英文标题】：Bootstrap Vue - change dropdown background

【发布时间】：2018-07-19 20:40:17

【问题描述】：

我正在使用 Bootstrap Vue 插件 - https://bootstrap-vue.js.org/

当有人像这样从下拉菜单中选择值时，我需要更改下拉菜单默认背景。

但这就是问题所在。当有人单击下拉菜单时，他们会在 dropwdown 包装器中切换“显示”类。红色突出显示的 div 没有任何类新类。

我尝试设置 .dropdown-toggle 类的样式，但它仅覆盖默认样式。有什么解决办法吗？

.dropdown-toggle
  background-color: #FF5722;
  border-color: #FF5722;

Jsfiddle

【问题讨论】：

尝试设置按钮的样式而不是.dropdown-toggle

不走运，同样的结果

.show>.btn-secondary.dropdown-toggle background-color: #FF5722 确保在buttons.scss文件样式之后加载您的自定义css

当有人点击并选择值时，.show 类会从 div 中删除。然后这是\n工作。

你的小提琴 => jsfiddle.net/o2gqmqzy/1

【参考方案1】：

您可以直接在样式中进行操作。例如：

  <b-form-select
  options="[1, 2, 3]"
  style="background: red">
</b-form-select>

或者创建一个类...

【参考方案2】：

  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>

代替 btn btn-secondary 更改按钮类，如危险、主要等......有关更多信息，请点击此链接

https://getbootstrap.com/docs/4.0/components/dropdowns/