自定义bootstrap 4 cdn

问题描述 投票：-1回答：1

嗨，我试图覆盖一些bootstrap 4 CSS / SCSS，但我的代码不起作用，但当我在W3学校运行它的工作原理。我错过了什么或者我只是愚蠢吗？同样修改custom.scss文件实际上不是一个选项，因为我希望不同的CSS文件提供给用户，具体取决于是否启用了一个选项

<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>
    .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>
css bootstrap-4 cdn
1个回答
0
投票

问题是选择器不够具体。看看下面的内容。

<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覆盖样式。但不建议这样做。它自2个不同的元素以来也不起作用

.active {
   color: red !important;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.