在 bootstrap-vue 中呈现自定义样式
Rendering custom styles in bootstrap-vue
我正在尝试向使用 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_
。
这是因为您将样式限制在组件范围内,并且由于 bootstrap vue 下拉列表是另一个组件,您将无法使用范围样式执行此操作。
尝试像这样删除 scoped 属性。
<style>
#dropdownMenuButton > button {
width: 100%;
}
#dropdownMenuButton__BV_toggle_ {
width: 100%;
}
</style>
如果不想使全局样式混乱,您也可以使用 /deep/
关键字来仅影响子组件:
<style scoped>
/deep/ #dropdownMenuButton > button {
width: 100%;
}
/deep/ #dropdownMenuButton__BV_toggle_ {
width: 100%;
}
</style>
我正在尝试向使用 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_
。
这是因为您将样式限制在组件范围内,并且由于 bootstrap vue 下拉列表是另一个组件,您将无法使用范围样式执行此操作。
尝试像这样删除 scoped 属性。
<style>
#dropdownMenuButton > button {
width: 100%;
}
#dropdownMenuButton__BV_toggle_ {
width: 100%;
}
</style>
如果不想使全局样式混乱,您也可以使用 /deep/
关键字来仅影响子组件:
<style scoped>
/deep/ #dropdownMenuButton > button {
width: 100%;
}
/deep/ #dropdownMenuButton__BV_toggle_ {
width: 100%;
}
</style>