css - 通过类覆盖 Bootstrap 中的颜色与手动修改几个 .css 文件

Question

我的目标是将 nav-pills 设置为红色。在这两页之间阅读

• > https://getbootstrap.com/docs/4.4/utilities/colors/#background-color
• > https://getbootstrap.com/docs/4.4/components/buttons/

我的解释是，我应该能够简单地在 <div class ""> 中添加预定义的颜色。 .

我想要红色并尝试了以下方法:

• .bg-danger
• red
• btn btn-danger

当我改变 nav-pills至 btn btn-danger ，它改变但并不理想(之后形式本身相当丑陋)。所以我的猜测是 pills 垂直代码不应该使用 btn 着色方法。当我尝试添加 .bg-danger或 red , 两者都不显示。我正在尝试 red即使它没有列在上面列出的两个页面上。原因是因为我看到它在顶部的主 bootstrap.css 中有一个定义。

:root {
lots of other colors;
--red: #dc3545;
lots of other colors;
}

所以我试过 red , -red , --red , .bg-red和 .bg--red但都没有成功。仅供引用，我在这里将颜色代码更改为我想要的红色(bootstrap 的危险红色希望在我遗漏某些内容时使我的网站保持一致)。

那么我如何在不编辑 4 个 css 文件的情况下真正覆盖颜色，或者我只是偶然喜欢一个自定义不像其他支持那样支持的特定功能？

默认蓝色药丸的常规代码(当然假设您有 Bootstrap 文件)。

  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

带有 .bg--red 的代码修饰符。抱歉，我不知道如何突出显示。我试过 <pre class="prettyprint">...</pre>但它只会弄乱我的代码。

<div class="col-3">
    <div class="nav flex-column nav-pills .bg--red" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

编辑1 澄清一下，我通过编辑 <div class=""> 寻找的最终结果用于激活的药丸菜单项是红色而不是默认的蓝色。我通过修改得到的结果最多改变了表单背景本身，不可取而且相当丑陋；它没有改变激活药丸的背景。我不确定在不编辑 .css 的情况下该自定义是否可用。事实上，我能得到想要的结果的唯一方法是编辑包含对药丸颜色的引用的 4 个 .css 文件。如果我决定使用不同颜色的不同菜单，我只是希望有一种方法可以在更高层次上做到这一点。

Answer 1

你实际上是想在这里使用bg-danger。默认情况下它是 #dc3545 又名“红色”。此外，在使用 HTML 元素时，类名前没有句点。

<div class="nav flex-column nav-pills bg-danger" id="v-pills-tab" role="tablist" aria-orientation="vertical">

确保将它添加到所有其他定义了背景颜色的类的末尾。整个 nav-pill 部分将为危险/红色。