如何为“.navlink”覆盖 Bootstrap 的 CSS 样式？答案

【问题标题】：How to override CSS styles of Bootstrap for ".navlink"?如何为“.navlink”覆盖 Bootstrap 的 CSS 样式？
【发布时间】：2022-02-11 15:12:19
【问题描述】：

我无法在我的 html 文件中将“.navlink”的颜色更改为白色。请帮我把“.navlink”的颜色改成白色。

<section id="navbar-section">
   <nav class="navbar navbar-dark navbar-expand-md bg-primary " >
       <a href="#" class="navbar-brand">tent workshop</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav">
               <li class="nav-item active" >
                   <a href="#" class="nav-link" aria-current="page">Home</a>
               </li>
               <li class="nav-item active" >
                   <a href="#" class="nav-link" aria-current="page">Contact</a>
               </li>
               <li class="nav-item active" >
                   <a href="#" class="nav-link" aria-current="page">Products</a>
               </li>
           </ul>
       </div>

   </nav>
</section>

【问题讨论】：

.nav-link { color: white; }

标签： html css twitter-bootstrap

【解决方案1】：

您应该始终使用 Bootstrap 使用的选择器来覆盖 bootstrap 定义的颜色。此外，您的 CSS 必须包含在 Bootstrap 之后。

.navbar-nav .nav-link {
  color: #ffffff;
}

.navbar-nav .nav-link:focus, 
.navbar-nav .nav-link:hover {
  color: #ffffff;
}

或者你使用 "!important" 覆盖 Bootstrap 中的 CSS

.nav-link {
  color: #ffffff!important;
}

.nav-link:focus, 
.nav-link:hover {
  color: #ffffff!important;
}

【讨论】：

感谢它也有效
很高兴我能帮上忙。这种方法应该是最干净的。如果回答了您的问题，请将答案标记为正确。

【解决方案2】：

你会试试这个吗？

<a href="#" class="nav-link" style="color:white;" aria-current="page">Home</a>

style="颜色：白色；"它通常有效

【讨论】：

谢谢你
内联样式不是好的解决方案。内联样式由于将内容与表示混合在一起而失去了样式表的许多优点。

【解决方案3】：

<nav class="navbar navbar-light navbar-expand-md bg-light " >

试试这个。它将使您的导航栏背景颜色变为白色

【讨论】：