如何更改Bootstrap边框的颜色？

Question

一直在尝试如何更改Bootstrap边框的颜色，而不使用通用的Bootstrap颜色（也就是

<span class="border border-primary"></span>

所以我尝试给我的 border 加上一个 id，并且在 .CSS 文件中对该 id 进行样式设置：border-color: yellow; 和 color: yellow; 但是没有成功。代码无效。虽然 background-color: yellow; 可以正常工作，但边框本身没有起作用。

这是我的代码：

.iconBorder {
  border-color: yellow;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<span class="border border-primary">Button</span>
<span class="border-bottom p-4 m-2 d-inline-block" style="margin-top: em" id="iconBorder">

- user14371150

---

尝试使用 #iconBorder { border-color: yellow; } - 因为它是一个id。 - A. Meshu

@A.Meshu，这个 #iconBorder { border-color: yellow; } 如果没有在颜色后面加上 !important 就不会生效。 - Umutambyi Gad

@Gad 我还没有读过Bootstrap 4的CSS文件，但我认为如果你在加载Bootstrap后声明CSS规则，则可以避免使用 !important。 - A. Meshu

Bootstrap可以通过简单地将新样式放置在bootstrap之后来进行覆盖，无论是在bootstrap文件的底部还是在另一个在bootstrap之后加载的文件中。在大多数情况下，不需要使用!important标签自己挖掘一个坑。 - Josh Bonnick

Answer 1

请参考关于!important的答案。此外，您的CSS文件中有：

.iconBorder {
    border-color: yellow;
}

.iconBorder是一个类。你的HTML中使用了'iconBorder'作为ID。

所以你的CSS应该使用井号：

```css #iconBorder { /* your styles here */ } ```

#iconBorder {
    border-color: yellow;
}

这可能不能解决问题（请见！important），但可以帮助，供您参考。

- wazz

---

我认为问题在于使用了ID，而CSS使用了类选择器。在加载Bootstrap后简单地加载自己的CSS文件可以消除CSS文件中大量!important标签的使用，这对我来说只会在项目开发的后期带来更多的麻烦。 - Josh Bonnick

不总是有效的。它与加载顺序一样重要，也与特定性有关。 - wazz

是的，我想选择器结构也是需要考虑的。 - Josh Bonnick

Answer 2

如果您想覆盖bootstrap的任何默认属性，则必须将这些属性设为!important。

例子

.container {
  display: flex;
  justify-content: center;
}

.border {
  margin: 10px;
}

.border-primary:nth-child(1) {
  border-color: green !important;
}

.border-primary:nth-child(2) {
  border-color: yellow !important;
}

.border-primary:nth-child(3) {
  border-color: red !important;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
  <span class="border border-primary">Button</span>
  <span class="border border-primary">Button</span>
  <span class="border border-primary">Button</span>
</div>

- Umutambyi Gad