Question

嗨，我正在尝试覆盖一些bootstrap 4 CSS / SCSS，但是我的代码无法正常工作，但是当我在w3学校中运行它时，它可以正常工作。我错过了什么还是我只是愚蠢？另外，修改custom.scss文件并不是真正的选项，因为我希望根据是否启用了选项将不同的CSS文件提供给用户

for

Answer 1

问题在于选择器不够具体。看看以下内容。

<html>
  <head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <style>
    .navbar-dark .navbar-nav .nav-link.active.active {
      color: red;
    }
    </style>


  </head>

  <body>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
          <a class="navbar-brand" href="#">HTUDelta</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>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                  <li class="nav-item">
                      <a class="nav-link active" href="#">Home
                          <span class="sr-only">(current)</span>
                      </a>
                  </li>
                  <li class="nav-item active">
                      <a class="nav-link" href="#">Users only
                          <span class="sr-only">Users only</span>
                      </a>
                  </li>
                  <li class="nav-item active">
                      <a class="nav-link" href="#">Featchers
                          <span class="sr-only">Upcoming</span>
                      </a>
                  </li>
              </ul>
              <ul class="navbar-nav ml-auto">
                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                          aria-expanded="false">Dropdown </a>
                      <div class="dropdown-menu" aria-labelledby="colourBlindDropDown">
                          <a class="dropdown-item" href="?colour=Trichromacy&set=true">Trichromacy</a>
                          <a class="dropdown-item" href="?colour=Deuteranomaly&set=true">Deuteranomaly</a>
                          <a class="dropdown-item" href="?colour=Protanomaly&set=true">Protanomaly</a>
                          <a class="dropdown-item" href="?colour=Tritanomaly&set=true">Tritanomaly</a>
                          <a class="dropdown-item" href="?colour=Monochromaticy&set=true">Monochromaticy</a>
                          <div class="dropdown-divider"></div>
                      </div>
                  </li>
              </ul>
              <form class="form-inline my-2 my-lg-0">
                  <input class="form-control mr-sm-2" type="text" placeholder="Username" aria-label="Username">
                  <input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="password">
                  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Login</button>
              </form>
          </div>
      </nav>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  </body>
</html>

还要注意，您在不同的元素上使用了类active，这无法按预期工作。您同时使用li和a元素。选择一个元素并根据其调整选择器。

<li class="nav-item">
  <a class="nav-link active" href="#">Home
     <span class="sr-only">(current)</span>
   </a>
</li>
<li class="nav-item active">
   <a class="nav-link" href="#">Users only
     <span class="sr-only">Users only</span>
   </a>
</li>

一种肮脏的方式是使用important覆盖样式。但是不建议这样做。由于两个不同的元素，它也不起作用

.active {
   color: red !important;
}

自定义bootstrap 4 CDN

1 个答案: