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

尝试删除这样的作用域属性。

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

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

Answer 2

如果您不想使全局样式混乱，也可以使用/deep/关键字来影响子组件：

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

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

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

2 个答案: