Как сделать так, чтобы бутстрап не перекрывал мой специфический стиль?

Question

Я создал HTML-меню с конкретными стилями CSS. Это работает нормально, пока я не добавлю ссылку на Bootstrap в заголовок:

Добавлена ​​ссылка

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

При добавлении этой ссылки на Bootstrap появится выпадающее меню Файл неработает больше ... (Кстати, начальная загрузка была добавлена ​​для другой цели: 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

Проблема с вашим кодом в том, что вы используете 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>