如何更改引导选择颜色

Question

您好，我对使用引导程序很陌生，我决定在练习网站上使用他们的导航栏和药丸按钮，在选择每个按钮时，突出显示的颜色默认为蓝色，而不是我想要的颜色（黑色），因此我想知道我怎么能改变这一点。我曾尝试使用他们的 bg-dark、btn btn-dark 类，但似乎都不起作用，所以我尝试更改 css 中的颜色，但在取消选择按钮时无法使颜色不适用，然后我尝试使用： :active 并且一旦被选中就无法让按钮保持黑色。下面我将添加图片和代码，感谢任何帮助！

      <div class="container-fluid" id="uk">
    <ul
      class="nav nav-pills mb-3 justify-content-center"
      id="pills-tab"
      role="tablist "
    >
      <li class="nav-item" role="presentation">
        <button
          class="nav-link active"
          id="pills-home-tab"
          data-bs-toggle="pill"
          data-bs-target="#pills-home"
          type="button "
          role="tab "
          aria-controls="pills-home "
          aria-selected="true"
          ari
        >
          HOME
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button
          class="nav-link"
          id="pills-profile-tab"
          data-bs-toggle="pill"
          data-bs-target="#pills-profile"
          type="button"
          role="tab"
          aria-controls="pills-profile"
          aria-selected="false"
        >
          MENU
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button
          class="nav-link"
          id="pills-contact-tab"
          data-bs-toggle="pill"
          data-bs-target="#pills-contact"
          type="button"
          role="tab"
          aria-controls="pills-contact"
          aria-selected="false"
        >
          FAQ
        </button>
      </li>
    </ul>
    <div class="tab-content" id="pills-tabContent">
      <div
        class="tab-pane fade show active"
        id="pills-home"
        role="tabpanel"
        aria-labelledby="pills-home-tab"
      >
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur
        labore explicabo hic maiores suscipit debitis nam facere error
        quisquam corrupti, praesentium rem amet tenetur, ducimus a
        blanditiis tempore? Nihil, quam?
      </div>
      <div
        class="tab-pane fade"
        id="pills-profile"
        role="tabpanel"
        aria-labelledby="pills-profile-tab"
      >
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio neque
        odit quia quaerat tempore voluptatum nihil provident labore, a ipsum
        asperiores dicta minus quos voluptas at earum vitae aut doloremque!
      </div>
      <div
        class="tab-pane fade"
        id="pills-contact"
        role="tabpanel"
        aria-labelledby="pills-contact-tab"
      >
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum
        suscipit aliquid officia quaerat ratione sunt corrupti
        exercitationem dolores quasi illo eaque tempore nam, iure temporibus
        laudantium mollitia reprehenderit nihil nobis.
      </div>
    </div>
  </div>
</div>

CSS 代码尝试

1st attempt -

#pills-home-tab {
background-color: black;
}

2nd attempt - 

#pills-home-tab:active {
background-color: black;
}

下面是一个图片链接，以更好地展示我想做的事情；

Answer 1

请记住，您必须将自定义样式作弊放置在引导程序下方以修改您想要的任何样式

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="mystyle.css">

我建议您使用代码 sn-p 来确认您是否是这样配置的

Answer 2

默认情况下，在引导程序中，“.active”类是蓝色的

你可以使用：

.nav-pills .nav-link.active {
    background-color: #000; 
}

如果上述答案不起作用，请尝试

.nav-pills .nav-link.active {
    background-color: #000 !important; 
}