为什么 Bootstrap 中的边框类的颜色属性有一个重要的覆盖? [英] Why is there an important override on the border classes's color property in Bootstrap?

问题描述

在我的导航中应用边框时，我认为最好使用 引导程序 .border 类.

When applying a border to my navigation, I thought it would be best practice to make use of the Bootstrap .border class.

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

But looking into the code that will render using this class, it appears to be using an !important value on the color value of the border property inside the .border class. In this case I was making use of the .border-bottom class to add a border to the bottom of my navigation.

这是使用类时呈现的代码的样子:

This is what the rendered code would look like when using the class:

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

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

This means if I want to edit the color of this border class, I am required to override the color value with another !important value. I was wondering, why is this done like this?

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

Should I still use the .border class for achieving this purpose and override using another !important in a custom stylehsheet? Or is the .border class not meant for achieving the purpose I am trying to achieve (e.g. I would like a red border instead of whatever white/grey-ish color this is)?

推荐答案

使用 !important 被认为对于实用程序/帮助程序类是可以接受的，Bootstrap 的作者有 选择使用 !important 在 all Bootstrap 4 实用类.

Using !important is considered to be acceptable for utility/helper classes, and Bootstrap's authors have chosen to use !important on all of the Bootstrap 4 Utility classes.

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

This means that the Border Color utility classes also use !important, and since they follow the other Border classes in CSS file, the !important on the color will take precedence (Example).

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

If you want to define your own custom border color, then as you said, you will need to use !important.

这篇关于为什么 Bootstrap 中的边框类的颜色属性有一个重要的覆盖?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！