Отрисовка пользовательских стилей в bootstrap-vue
Я пытаюсь добавить несколько пользовательских стилей в компонент раскрывающегося меню, который использует Bootstrap-Vue. Я использую документацию здесь.
Вот мой шаблон:
<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>
Но не повезло. К вашему сведению, идентификатор создаваемой кнопки - dropdownMenuButton__BV_toggle_.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Это связано с тем, что вы создаете стили, привязанные к компоненту, и поскольку раскрывающийся список bootstrap vue является еще одним компонентом, вы не сможете сделать это со стилями с ограниченной областью.
Попробуйте удалить атрибут scoped следующим образом.
<style>
#dropdownMenuButton > button {
width: 100%;
}
#dropdownMenuButton__BV_toggle_ {
width: 100%;
}
</style>
Спасибо, сработало !! Кроме того, есть ли из двух разных способов выбора элемента кнопки предпочтительный метод (родительский / дочерний стиль по сравнению с идентификатором элемента)? Идентификатор не отображается в моем шаблоне (он создается с помощью bootstrap-vue), поэтому я не хочу ссылаться на него.
Вы также можете использовать ключевое слово /deep/, чтобы просто повлиять на дочерние компоненты, если вы не хотите загромождать глобальные стили:
<style scoped>
/deep/ #dropdownMenuButton > button {
width: 100%;
}
/deep/ #dropdownMenuButton__BV_toggle_ {
width: 100%;
}
</style>
+1 ты сумасшедший, я потратил почти 2 часа и получил немного разочарования, наконец / глубоко / отлично работает @randy ... спасибо ...
может вы можете посмотреть это: stackoverflow.com/questions/48699688/…