为什么在 Bootstrap 中对边框类的颜色属性有一个重要的覆盖?



在将边框应用于我的导航时,我认为使用Bootstrap.border类是最佳做法。

但是查看将使用此类呈现的代码,它似乎在.border类内 border 属性的颜色值上使用 !important 值。在本例中,我使用.border-bottom类在导航底部添加边框。

这是使用该类时呈现的代码的外观:

.border-bottom {
border-bottom: 1px solid #dee2e6!important;
}

这意味着如果我想编辑此边框类的颜色,则需要用另一个!important值覆盖颜色值。我想知道,为什么要这样做?

我是否仍应使用.border类来实现此目的,并在自定义样式表中使用另一个!important进行覆盖?还是.border类不是为了实现我想要达到的目的(例如,我想要一个红色边框而不是任何白色/灰色)?

使用!important被认为是可以接受的实用程序/帮助程序类,并且 Bootstrap 的作者选择在所有Bootstrap 4 Utility 类上使用!important

这意味着边框颜色实用程序类也使用!important,并且由于它们遵循 CSS 文件中的其他边框类,因此颜色上的!important将优先(示例)。

如果要定义自己的自定义边框颜色,那么正如您所说,您将需要使用!important.

您可能正确地使用它,但是要更改其值,您可能需要在引导程序的变量 sass 文件中执行此操作。

最新更新