我正在 bootstrap 中构建一个响应式导航栏，并尝试根据我的需要对其进行自定义以进行我自己的设计。
我设法在移动尺寸窗口上下拉，但右边有我似乎无法摆脱的边距，但我尝试覆盖类属性(请检查下图)
我正在使用 bootstrap 3.3.7 和 jquery-3.3.1
.navbar {
height: 50px;
color: #2a4068;
margin-bottom: 0px;
}
.navbar-default {
color: #2a4068;
background: #d8dfea;
border-bottom: solid 0px #2a4068;
box-shadow: 0px 1px 2px 0px #2a4068;
}
.container {
height: 50px;
padding-left: 0px;
padding-right: 0px;
}
.navbar-header {
height: 50px;
margin-left: 0px;
margin-right: 0px;
}
.navbar-collapse {
padding-left: 0px;
padding-right: 0px;
}
.navbar-nav {
margin-right: 0px;
margin-left: 0px;
padding-left: 0px;
padding-right: 0px;
margin: 0px 0px;
}
.navbar-right {
padding-left: 0px;
padding-right: 0px;
margin-right: 0px;
}
.logoImage {
z-index: 1;
margin-top: -7px;
margin-bottom: 20px;
}
.navbar-nav li {
text-align: center;
border-radius: 4px;
color: #2a4068;
cursor: pointer;
}
.navbar-nav li:hover {
background-color: #99b1d7;
color: #2a4068;
opacity: 0.7;
}
#nav_links {
display: block;
color: #2a4068;
font-weight: bold;
}
#navbar_menu {
width: 100%;
margin-right: 0;
margin-top: -10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Bootstrap</title>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand logoImage" href="index.php">
<img src="images/logo_large.png" title="Asserter" alt="logo" width="110" height="35" class="large-logo" id="brand-image" />
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse" id="navbar_menu">
<ul class="nav navbar-nav navbar-right">
<li class=""><a href="" class="" id="nav_links">Front</a></li>
<li class=""><a href="" class="" id="nav_links">Admin</a></li>
<li class=""><a href="" class="" id="nav_links">Profile</a></li>
<li class=""><a href="" class="" target="_blank" id="nav_links">Chat</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="nav_links">Notifications</a>
<ul class="dropdown-menu">
<li><a href="" id="nav_links">Facebook</a></li>
<li><a href="" id="nav_links">Twitter</a></li>
<li><a href="" id="nav_links">Instagram</a></li>
</ul>
</li>
<li class=""><a href="" class="" id="nav_links">Settings</a></li>
<li class=""><a href="" class="" id="nav_links">Log out</a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
</div>
<script src="js/jquery-3.3.1-dev.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>我需要一个符合屏幕限制的完美下拉菜单
最佳答案
我在 .container-fluid 类中发现了小填充。休息，我看不到任何边距。
.navbar {height: 50px; color: #2a4068; margin-bottom: 0px;}
.navbar-default {color: #2a4068; background: #d8dfea; border-bottom: solid 0px #2a4068;box-shadow: 0px 1px 2px 0px #2a4068;}
.container {height: 50px;padding-left: 0px;padding-right: 0px;}
.navbar-header {height: 50px;margin-left: 0px;margin-right: 0px;}
.navbar-collapse {padding-left: 0px;padding-right: 0px;}
.navbar-nav {margin-right: 0px;margin-left: 0px;padding-left: 0px;padding-right: 0px;margin: 0px 0px;}
.navbar-right {padding-left: 0px;padding-right: 0px;margin-right: 0px;}
.logoImage {z-index: 1; margin-top: -7px;margin-bottom: 20px;}
.navbar-nav li {text-align: center;border-radius: 4px;color: #2a4068;cursor: pointer;}
.navbar-nav li:hover{background-color: #99b1d7;color: #2a4068;opacity: 0.7;}
#nav_links {display: block;color: #2a4068;font-weight: bold;}
#navbar_menu {width: 100%;margin-right: 0;margin-top: -10px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand logoImage" href="index.php">
<img src="images/logo_large.png" title="Asserter" alt="logo" width="110" height="35" class="large-logo" id="brand-image"/>
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse" id="navbar_menu">
<ul class="nav navbar-nav navbar-right">
<li class=""><a href="" class="" id="nav_links">Front</a></li>
<li class=""><a href="" class="" id="nav_links">Admin</a></li>
<li class=""><a href="" class="" id="nav_links">Profile</a></li>
<li class=""><a href="" class="" target="_blank" id="nav_links">Chat</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="nav_links">Notifications</a>
<ul class="dropdown-menu">
<li><a href="" id="nav_links">Facebook</a></li>
<li><a href="" id="nav_links">Twitter</a></li>
<li><a href="" id="nav_links">Instagram</a></li>
</ul>
</li>
<li class=""><a href="" class="" id="nav_links">Settings</a></li>
<li class=""><a href="" class="" id="nav_links">Log out</a></li>
</ul>
</div>
</div>此设置适用于 chrome 和 firefox:
好的，对于您使用的版本，添加此 CSS 将修复边距。虽然，我建议您在司法上使用它。
.container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
margin-right: 0px;
margin-left: 0px;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
}
至于顶部空间，很难看出是哪个属性导致的，chrome 调试器无法选择该元素。这可能是因为不正确的代码或像 box-shadow 这样的属性。
更新:发现导航栏下方的空间错误。您实际上必须为导航栏标题指定正确的高度。对我来说这很有效:
.navbar-header {
height: 63px;
}
关于html - 如何摆脱 bootstrap css 导航栏中的边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54169230/