如何避免Bootstrap覆盖自定义样式？下拉菜单失效问题排查

你遇到的问题是Bootstrap 3.3.7的内置样式与你的自定义菜单类名冲突了——Bootstrap本身就有.navbar和.dropdown组件，这些类的默认样式覆盖了你的自定义CSS，导致纯CSS触发的下拉菜单失效。

最稳妥的解决方案：重命名自定义类名 #

避免和Bootstrap的内置类名撞车是最彻底的解决方式，只需要修改你的自定义类名和对应的HTML结构：

修改后的CSS（重命名冲突类）

body { font-family: Arial, Helvetica, sans-serif; }
.bg-img {
 /* The image used */
 background-image: url("Dedale.jpg");
 /* min-height: 380px; */
 /* Center and scale the image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 /* Needed to position the navbar */
 /* position: relative; */
}
/* 重命名为custom-navbar，避免和Bootstrap的.navbar冲突 */
.custom-navbar {
 overflow: hidden;
 background-color: #e9e9e9;
}
.custom-navbar a {
 float: left;
 font-size: 16px;
 color: black;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}
/* 重命名为custom-dropdown，避免和Bootstrap的.dropdown冲突 */
.custom-dropdown {
 float: left;
 overflow: hidden;
}
.custom-dropdown .dropbtn {
 font-size: 16px;
 border: none;
 outline: none;
 color: black;
 padding: 14px 16px;
 background-color: inherit;
 font-family: inherit;
 margin: 0;
}
.custom-navbar a:hover, .custom-dropdown:hover .dropbtn {
 background-color: #2196F3;
}
.custom-navbar a.active {
 color: white;
}
.custom-dropdown-content {
 display: none;
 position: absolute;
 background-color: #f9f9f9;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
 z-index: 999; /* 提高z-index，避免被Bootstrap元素遮挡 */
}
.custom-dropdown-content a {
 float: none;
 color: black;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 text-align: left;
}
.custom-dropdown-content a:hover {
 background-color: #ddd;
}
.custom-dropdown:hover .custom-dropdown-content {
 display: block;
}
/* Section SearchContainer */
.search-container {
 float: right;
}
.search-container button {
 float: right;
 padding: 6px 10px;
 margin-top: 8px;
 margin-right: 16px;
 background: #ddd;
 font-size: 17px;
 border: none;
 cursor: pointer;
}
.search-container button:hover {
 background: #ccc;
}
/* Input Zone */
.custom-navbar input[type=text] {
 padding: 6px;
 margin-top: 8px;
 font-size: 17px;
 border: none;
}

修改后的HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="custom-navbar bg-img">
 <div class="custom-dropdown">
 <button class="dropbtn">File <i class="fa fa-caret-down"></i> </button>
 <div class="custom-dropdown-content">
 <a href="#">Open</a>
 <a href="#">Close</a>
 <a href="#">Quit</a>
 </div>
 </div>
</div>

应急方案：提高自定义样式优先级（不推荐长期使用） #

如果暂时不想改类名，可以通过提升选择器权重或者添加!important强制覆盖Bootstrap的样式：

比如修改下拉菜单的显示规则：

/* 用更具体的选择器提高权重 */
.navbar.bg-img .dropdown:hover .dropdown-content {
 display: block !important; /* 应急用，尽量少用!important */
}

同时给.dropdown-content提高z-index，避免被Bootstrap的元素遮挡：

.dropdown-content {
 display: none;
 position: absolute;
 background-color: #f9f9f9;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
 z-index: 999 !important; /* 确保在Bootstrap元素上方 */
}

为什么会出现这个问题？ #

Bootstrap 3的.navbar组件默认设置了position: relative等属性，而你的自定义.navbar没有这个设置，导致下拉菜单的position: absolute定位出现问题；同时Bootstrap的.dropdown组件默认依赖JavaScript触发下拉，它的内置样式会覆盖你纯CSS hover触发的逻辑，最终导致下拉菜单无法正常显示。

内容的提问来源于stack exchange，提问作者BartmanDilaw