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

【问题标题】：How to apply CSS to a specific div button with bootstrap4?如何使用 bootstrap4 将 CSS 应用于特定的 div 按钮？
【发布时间】：2019-04-05 17:43:04
【问题描述】：

我想为包含引导按钮的分区指定 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 {...}
不，应该是#bootstrapButton .btn {...}
对不起，那是我的错误:)
这个不行，其实我以前试过

标签： html css bootstrap-4

【解决方案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 类，就应用这些样式。