javascript - 在 bootstrap-vue 中渲染自定义样式

Question

我正在尝试向使用 Bootstrap-Vue 的下拉菜单组件添加一些自定义样式。我正在使用文档 here .

这是我的模板:

<div class="container">
  <b-dropdown id="dropdownMenuButton" text="Dropdown Button" no-caret class="custom-dropdown">
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
    <b-dropdown-item>Third Action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item>Something else here...</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

我发现我可以为 #dropdownMenuButton 设置样式，但是当下拉菜单在浏览器中呈现时，它会在 #dropdownMenuButton 内部创建一个元素，而我无法为其设置样式。我试过这样做:

<style scoped>
  #dropdownMenuButton > button {
    width: 100%;
  }

  #dropdownMenuButton__BV_toggle_ {
    width: 100%;
  }
</style>

但运气不好。仅供引用，创建的按钮的 ID 是 dropdownMenuButton__BV_toggle_。

Answer 1

这是因为您正在将样式限制在组件范围内，并且由于 bootstrap vue 下拉列表是另一个组件，您将无法使用范围样式执行此操作。

https://vue-loader.vuejs.org/guide/scoped-css.html

尝试像这样删除 scoped 属性。

<style>
  #dropdownMenuButton > button {
    width: 100%;
  }

  #dropdownMenuButton__BV_toggle_ {
    width: 100%;
  }
</style>