jquery - 如何使 Bootstrap 不覆盖我的特定样式？

Question

我创建了一个具有特定 CSS 样式的 html 菜单。这工作正常，直到我在 header 中添加 Bootstrap 引用:

已添加链接

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

添加此 Bootstrap 引用会使下拉菜单文件不再工作...(顺便说一句，已经为其他目的添加了 Bootstrap :数据表……但这不是重点)。

我的错误是什么？

需要帮助。

谢谢。

没有 Bootstrap 的代码

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>

使用 Bootstrap 代码

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 类是 Bootstrap 的默认类。所以它在不添加 Bootstrap 库时有效。当您添加 Bootstrap 库时，您的 dropdown 类会与 Bootstrap 类发生冲突。将 dropdown 类的名称更改为其他类。

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