Question

我创建了具有特定CSS样式的html菜单。直到我在标头中添加Bootstrap引用，此方法才能正常工作：

添加的链接

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

添加此引导程序引用会使下拉菜单“文件”不再起作用... （顺便说一句，引导程序已被添加用于其他目的：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类是bootstrap的默认类。因此，当不添加引导程序库时，它可以工作。当您添加引导程序库时，您的dropdown类将与引导程序类发生冲突。将dropdown类的名称更改为其他一些类。

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

Answer 2

您的代码存在的问题是您在position: absolute;中使用了.dropwdown-content，并将该项目绝对定位到其第一个明确定位的父对象。 Bootstrap将父.dropdown的位置更改为relative，并将第一个定位的父位置更改为.dropdown

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

一个工作示例：

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>

如何使引导程序不覆盖我的特定样式？

2 个答案: