如何使引导程序不覆盖我的特定风格

Question

我创建了一个具有特定CSS样式的html菜单。这很好，直到我在标题中添加引导引用：

添加链接

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

添加此引导程序引用会使下拉菜单"文件"不再工作。。。(添加Btw引导程序是为了其他目的：DataTables……但这不是重点(。

我犯了什么错？

需要帮助。

谢谢。

没有引导程序的代码

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; */
}
.navbar {
overflow: hidden;
background-color: #e9e9e9;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
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; */
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #2196F3;
}
.navbar a.active {
/* background-color: #2196F3; */
color: white;
}
.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: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .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 */
.navbar input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}

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

使用引导程序的代码

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; */
}
.navbar {
overflow: hidden;
background-color: #e9e9e9;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
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; */
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #2196F3;
}
.navbar a.active {
/* background-color: #2196F3; */
color: white;
}
.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: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .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 */
.navbar input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}

<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="navbar bg-img">
<div class="dropdown">
<button class="dropbtn">File
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Open</a>
<a href="#">Close</a>
<a href="#">Quit</a>
</div>
</div>
</div>

Answer 1

您在代码中使用的dropdown类是引导程序的默认类。因此，它在没有添加引导程序库的情况下工作。当您添加引导程序库时，dropdown类会与引导程序类发生冲突。将dropdown类的名称更改为其他类。

https://getbootstrap.com/docs/3.4/javascript/#dropdowns

Answer 2

代码的问题是在.dropwdown-content中使用position: absolute;，并且将项绝对定位到其第一个显式定位的父项。Bootstrap将父级.dropdown的位置更改为relative，并将第一个定位的父级更改为.dropdown

解决方案：将.dropdown-content位置更改为fixed；因此CCD_ 11将被定位为与浏览器窗口相关。

一个工作示例：

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; */
}
.navbar {
overflow: hidden;
background-color: #e9e9e9;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
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; */
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #2196F3;
}
.navbar a.active {
/* background-color: #2196F3; */
color: white;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .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 */
.navbar input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}

<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="navbar bg-img">
<div class="dropdown">
<button class="dropbtn">File
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Open</a>
<a href="#">Close</a>
<a href="#">Quit</a>
</div>
</div>
</div>