Question

我试图覆盖一些Bootstraps的样式以创建特定的外观。我被解释说，只要我的自定义style.css在引导CDN之后被链接，那我就没事了。

然而，情况似乎并非如此。

以下是我的index.html：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nathan Coder</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">

      <a class="navbar-brand" href="index.html" style="margin-left: 100px;">Nathan Coder</a>
    </div>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">About</a></li>
        <li><a href="#">|</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">|</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

</body>
</html>

这是我的style.css：

nav {
    border-bottom: 3px;
    border-color: #4aaaa5;
}

.navbar-brand {
    color: #4aaaa5;
    background-color: #ffffff;
    font-size: 150%;
    font-family: 'Georgia', Times, Times New Roman, serif;
    padding: 20px;
}

它只是不能正常工作。任何提示？

Answer 1

首先，确保在CSS bootsrap之后列在头部。然后，尝试用body class和preant div class

标记它

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">

body.class_name nav {
border-bottom: 3px;
border-color: #4aaaa5;
}
or
div.class_name nav {
border-bottom: 3px;
border-color: #4aaaa5;
}

如何使用自定义的style.css覆盖引导程序？

1 个答案: