html - 如何使用 bootstrap4 将 CSS 应用于特定的 div 按钮？

Question

我想为包含引导按钮的分区指定一个 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”)。

Answer 1

1. 几乎没有理由使用内联样式或 !important。除非绝对必要，否则尽量避免这样做。

2. 为什么不将样式放在一个可重复使用的类中，以便随处使用？例如:

.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>