使用引导程序时未正确应用自定义样式[重复]答案

【问题标题】：Custom styles not proper applied while using bootstrap [duplicate]使用引导程序时未正确应用自定义样式[重复]
【发布时间】：2021-10-09 05:08:21
【问题描述】：

我正在使用引导程序和我自己的 CSS 样式制作网页。当我尝试更改某些样式时，bootstrap 似乎会覆盖其中的一些样式，例如从导航栏中删除线条或使导航栏全宽。我目前正在使用来自：Bootstrap 4: How to have a full width navbar with the content in a container (Like the SO Navbar)? 的解决方案将导航设置为全宽。

这是我的html：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Cuppela</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/index.css" type="text/css">

</head>
<body>
        <h1>Test</h1>
        <div id="main_nav">
        <div class="container-fluid" id="menu_container" style="max-width:100%;">
            <nav id="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            </nav>
        </div>
        </div>
</body>
</html>

这是我的 CSS：

h1{
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    text-align:center;
    font-size: 85px;
    color: black;
  }

body{
  margin: 0px;
}

#main_nav {
 background-color: #333;
}

nav ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #ff9900;
}

我目前使用的是 Bootstrap 4.3.1。

【问题讨论】：

您是否尝试将样式设置为 !important 状态
嗨，将样式设置为 !important 不会影响 css 的整个流程吗？

标签： html css twitter-bootstrap

【解决方案1】：

如果我是你，我会使用 css 类来覆盖样式，而不是针对 html 元素。这也为我们提供了改进 CSS 类的 specificity 的空间，这是 !important 的最佳替代方案。

【讨论】：

【解决方案2】：

您需要将重要应用到您的 css 元素。

h1{
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    text-align:center !important;
    font-size: 85px !important;
    color: black !important;
  }

body{
  margin: 0px !important;
}

#main_nav {
 background-color: #333 !important;
}

nav ul {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

ul {
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-color: #333 !important;
}

li {
  float: left !important;
}

li a {
  display: block !important;
  color: white !important;
  text-align: center !important;
  padding: 14px 16px !important;
  text-decoration: none !important;
}

li a:hover {
  background-color: #ff9900 !important;
}

【讨论】：