Как применить CSS к определенной кнопке div с помощью bootstrap4?
Я хочу указать стиль CSS для раздела, содержащего кнопку начальной загрузки, как я это сделал, это указать встроенный код CSS в теге кнопки, чтобы он не влиял на другие кнопки начальной загрузки на странице.
Следующий код работает встроенно:
<div id = "bootstrapButton">
<button style = "padding: 5px; width: 250px; margin-top: 4px !important" class = "btn btn-outline-primary shadow bg-white rounded" type = "button" data-toggle = "collapse" data-target = "#adminSection" aria-expanded = "false" aria-controls = "adminSection">
</div>
но я хочу импортировать файл CSS, который содержит те же стили для кнопки внутри div (обратите внимание, что затрагиваемый класс будет «btn»).
Нет, было бы #bootstrapButton .btn {...}
Извините, это была моя ошибка :)
это не работает, на самом деле я пытался в прошлом
Ответы 1
Вряд ли есть причина для использования встроенных стилей или
!important. Постарайтесь воздержаться от этого, если в этом нет крайней необходимости.Почему бы просто не поместить стили в повторно используемый класс, который вы будете использовать где угодно? Например:
.btn.btn-variant-1 { // Or whatever class name you want.
padding: 5px;
width: 250px;
margin-top: 4px;
}
Затем вы можете использовать его в своем html как таковом:
<button class = "btn btn-outline-primary shadow bg-white rouded btn-variant-1">CLick me!</button>
да, это работает, большое спасибо, но не могли бы вы объяснить мне, какова структура этого «.btn.btn-variant-1», пожалуйста?
@shaveax, все, что я хочу сказать, это то, что всякий раз, когда есть элемент, на котором есть классы .btn и .btn-variant-1, нужно применять эти стили.
ты можешь сделать
.bootstrapButton .btn {...}