【发布时间】：2021-07-15 23:40:24
【问题描述】：
我有一个导航栏，当我将引导程序添加到我的 html 页面时，导航栏不再起作用。我认为引导程序正在覆盖我的自定义 css。 这是我的导航栏：
.navbar {
overflow: hidden;
!important;
background-color: #333;
!important;
}
.navbar a {
float: left;
!important;
font-size: 16px;
!important;
color: white;
!important;
text-align: center;
!important;
padding: 14px 16px;
!important;
text-decoration: none;
!important;
}
.dropdown {
float: left;
!important;
overflow: hidden;
!important;
}
.logout {
float: right;
!important;
horiz-align: right;
!important;
}
.dropdown .dropbtn {
font-size: 16px;
!important;
border: none;
!important;
outline: none;
!important;
color: white;
!important;
padding: 14px 16px;
!important;
background-color: inherit;
!important;
font-family: inherit;
!important;
margin: 0;
!important;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
!important;
}
.dropdown-content {
display: none;
!important;
position: absolute;
!important;
background-color: #f9f9f9;
!important;
min-width: 160px;
!important;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
!important;
z-index: 1;
!important;
}
.dropdown-content a {
float: none;
!important;
color: black;
!important;
padding: 12px 16px;
!important;
text-decoration: none;
!important;
display: block;
!important;
text-align: left;
!important;
}
.dropdown-content a:hover {
background-color: #ddd;
!important;
}
.dropdown:hover .dropdown-content {
display: block;
!important;
}<div th:fragment="header">
<div class="navbar">
<div class="logout">
<a th:href="@{/logout}">Logout</a>
</div>
<div class="dropdown">
<button class="dropbtn">Hackathon
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a th:href="@{/administrator/search/hackathons}">Search</a>
<a th:href="@{/administrator/create/hackathon}">Add</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Judge
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a th:href="@{/administrator/search/judges}">Search</a>
<a th:href="@{/administrator/create/judge}">Add</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Mentor
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a th:href="@{/administrator/search/mentors}">Search</a>
<a th:href="@{/administrator/create/mentor}">Add</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Team
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a th:href="@{/administrator/search/teams}">Search</a>
<a th:href="@{/administrator/create/team}">Add</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Member
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a th:href="@{/administrator/search/members}">Search</a>
</div>
</div>
</div>
</div><!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymleaf.org" >
<head>
<meta charset="UTF-8">
<title>Hackathon</title>
<link rel="stylesheet" th:href="@{/style/header.css}">
<link th:rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/>
<script th:src="@{/webjars/jquery/3.0.0/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/1.12.9-1/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.0.0-2/js/bootstrap.min.js}"></script>
</head>有没有办法保留这个导航栏？我尝试像这样重命名：class="navbar_custom" in html 和 css 但它不起作用。我找不到像这样的其他导航栏，所以我想要它。我也尝试了这个 !important 标签，即使我读到这不是一个好主意，但仍然无法正常工作。 提前致谢。
【问题讨论】：
-
您不将其转换为 Bootstrap 导航栏的任何原因，您喜欢的样式？这可能会减少工作量，并为您留下更标准和可维护的东西。
-
您的演示并没有真正展示这种情况。您是否在 Bootstrap 之后加载 CSS？请更新您的 sn-p 以实际显示问题。
-
如果回答对您有帮助，请标记为正确。
标签： html css bootstrap-4 thymeleaf navbar