我从 W3Schools 复制了“大型菜单”导航栏到一个空白页面并附加了自定义 CSS，但是一旦我附加了 bootstrap CSS 文件，页眉布局就完全改变了，下拉内容也不再显示。我在代码片段下方添加了两张图片以显示究竟发生了什么。我尝试用元素检查器查找 CSS 冲突，但没有成功。我还尝试了不同版本的 bootstrap.css，但所有版本都导致相同的导航栏错位。
/* HEADER CSS */
/* Custom */
.navbar {
height:100px!important;
border-bottom:5px solid rgba(55,175,75,1.00)!important;
background-color:rgba(255,255,255,1.00)!important;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"!important;
}
.brand {
margin-top:9px!important;
width:175px!important;
}
.brand-link {
background-color:rgba(255,255,255,0.00)!important;
}
.brand-link:hover {
background-color:rgba(255,255,255,0.00)!important;
}
.navlink {
margin-top:45px!important;
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,1.00)!important;
font-size:1.10em!important;
font-weight:300!important;
}
.navlink:hover {
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,0.35)!important;
}
.droplink {
}
.droplink:hover {
}
.dropbtn {
margin-top:45px!important;
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,1.00)!important;
cursor:pointer!important;
font-size:1.10em!important;
font-weight:300!important;
}
.dropdown-content {
margin-top:-2px!important;
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .header {
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .header-title {
margin-top:0!important;
margin-bottom:8px!important;
color:rgba(255,255,255,1.00)!important;
font-size:1.35em!important;
}
.dropdown-content .droprow {
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .dropcol {
background-color:rgba(55,175,75,1.00)!important;
}
/* Default */
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Naamloos document</title><h3></h3>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="navbar">
<a href="/index.htm" class="brand-link">
<img src="/img/brand.png" class="responsive brand" alt="navbar brand icon">
</a>
<a href="#home" class="navlink">Home</a>
<a href="#news" class="navlink">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<div class="header">
<h2 class="header-title">Mega Menu</h2>
</div>
<div class="row droprow">
<div class="column dropcol">
<h3 class="header-title">Category 1</h3>
<a href="#" class="droplink">Link 1</a>
<a href="#" class="droplink">Link 2</a>
<a href="#" class="droplink">Link 3</a>
</div>
<div class="column dropcol">
<h3 class="header-title">Category 2</h3>
<a href="#" class="droplink">Link 1</a>
<a href="#" class="droplink">Link 2</a>
<a href="#" class="droplink">Link 3</a>
</div>
<div class="column dropcol">
<h3 class="header-title">Category 3</h3>
<a href="#" class="droplink">Link 1</a>
<a href="#" class="droplink">Link 2</a>
<a href="#" class="droplink">Link 3</a>
</div>
<div class="column dropcol">
<h3 class="header-title">Category 4</h3>
<a href="#" class="droplink">Link 1</a>
<a href="#" class="droplink">Link 2</a>
<a href="#" class="droplink">Link 3</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>没有附加任何 bootstrap CSS 文件(蓝色区域是图像)，鼠标悬停在下拉按钮上!
附加了 bootstrap CSS 文件(蓝色区域是图像)，同时鼠标悬停在下拉按钮上!
最佳答案
https://getbootstrap.com/docs/3.3/ 尝试使用 Bootstrap 3 并检查您是否仍然遇到这种情况。
关于html - 导航栏 CSS 与 Bootstrap CSS 文件冲突？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59800882/