Question

我正在为我的姐姐创建一个引导站点，每次我想要更改CSS时都有效，或者90％的时间都无法正常工作。

我制作了一个新文件“ style.css”来覆盖引导程序，我将其放置在我所有其他标签的下面，但仍然无法正常工作，有人可以解释一下吗？

谢谢

编辑：

<section class="bg-primary text-white mb-0" id="about">
    <div class="container">
      <h2 class="text-center text-uppercase text-white">About</h2>
      <hr class=" mb-5">
      <div class="row">
          <p class="lead">some text...</p>
          <p class="lead">some text...</p>
      </div>
      <div class="text-center mt-4">
        <a class="btn btn-xl btn-outline-light" href="#">
          <i class="fas fa-download mr-2"></i>
          Download Now!
        </a>
      </div>
    </div>
  </section>

比我在引导css文件中的这一行要多：

section{
padding: 6rem 0;
}

我想将其更改为9雷姆，以便在我的自定义css文件中：

section{
padding: 9rem 0;
}

我什么都不做）：那只是一个例子，也许我做的事情非常非常愚蠢，但我不这么认为。而不是缓存。

头：

<head>
<!--there is some more here but not nessecary-->
 <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

  <!-- tab icon -->
  <link rel="icon" href="img/logo_1.png">

  <!-- Custom fonts for this template -->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">

  <!-- Plugin CSS -->
  <link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
  <!--icons-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Custom styles for this template -->
  <link href="css/freelancer.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

谢谢

Answer 1

也许您的网页仍在缓存中，请尝试按ctrl + f5来检查其是否为预设。否则，只需在CSS样式中使用!important关键字即可。在下面，您将找到一个如何使用！important语句的示例。

.row {
  padding: 15px !important;
  margin: 10px auto !important;
}

一条重要的语句将覆盖文件，即使它们位于dom的执行堆栈之后。

这是用法的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Selector_Types

编辑：请注意，当您以后要更改此关键字时，很难使用import关键字，对于您的特定情况，这会很好。但是，如果是针对较大的客户和项目，请注意您的重要关键字;）。

Answer 2

使用相同的导入，我看不到Bootstrap的CSS在section标签上有任何填充，您定义的样式是否正确应用，也许是导致此问题的其他样式表？

还请注意，您将两次导入Bootstrap CSS，也许是针对不同版本的？尝试删除不使用的导入。实际上，尝试一次删除一个css导入，看看问题何时消失，这至少可以帮助您找到哪个样式表覆盖了您的样式

section {
  padding: 9rem 0;
}

<head>
  <!--there is some more here but not nessecary-->
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

  <!-- Custom fonts for this template -->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">

  <!--icons-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<section class="bg-primary text-white mb-0" id="about">
  <div class="container">
    <h2 class="text-center text-uppercase text-white">About</h2>
    <hr class=" mb-5">
    <div class="row">
      <p class="lead">some text...</p>
      <p class="lead">some text...</p>
    </div>
    <div class="text-center mt-4">
      <a class="btn btn-xl btn-outline-light" href="#">
        <i class="fas fa-download mr-2"></i> Download Now!
      </a>
    </div>
  </div>
</section>

在Bootstrap 4中更改CSS以自定义网站

2 个答案: