如何应用CSS到一个特定的div按钮与bootstrap4？

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

>

几乎没有理由使用内联样式或！重要信息。除非你万不得已，否则尽量不要这样做。

为什么不把样式放在一个可重用的类中，您可以在任何地方使用它呢？例如：

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