Question

如何在Bootstrap的导航栏中更改文本的颜色？

我只想将导航链接设为紫色，而不是左侧的主要标题。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Animal Shelter Website</title>
  <link rel="stylesheet" href="style1.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css'>
  <link rel="stylesheet" href="./style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="index.js"></script>
</head>
  
<body style="background-color: black">
  <nav class="navbar navbar-expand-xl navbar-dark">
    <a class="navbar-brand" href="#">Animal Shelter Website</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  
<body id=main-navbar">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item nav-item-border">
          <a class="nav-link active" href="index.html">HOME</a>
        </li>
    </div>
  </nav>
  <hr>```

Answer 1

您可以使用简单的CSS！
加

<style>
a:link {
  color: ANYCOLOR;
}

a:visited {
  color: ANYCOLOR;
}
</style>

要了解更多信息，请转到this链接

Answer 2

您可以添加新的CSS样式表，该样式表以其他颜色覆盖类nav-link。

您可能必须使用！important。

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

如果您将在其他地方使用导航链接并且不想直接编辑该类，则可以创建一个自定义类并应用它。

Answer 3

简单的方法是在样式标签中添加样式：

<style>
    .nav-link {
        color: purple;
    }
</style>

相反，如果您有自定义的CSS文件，则可以添加到其中：

.nav-link {
    color: purple;
}

请确保此样式规则位于html文档中的其他样式标签和CSS文件之后，否则它可能会被其他样式规则覆盖。

此外，请尽量避免使用!important。添加其他样式规则时，它可能会导致CSS复杂化。

还请注意，您有两个开始<body>标签，而html文件应该只有一个开始<body>标签和一个结束</body>标签。

如何在Bootstrap的此导航栏中更改文本的颜色？

3 个答案: