很抱歉使用长标题，但是如前所述，当窗口折叠时，第一个下拉元素和主导航栏之间会有一个空白。右侧还有一个难看的边缘，这是不受欢迎的。我已经包含了我的HTML和CSS，尽管下拉菜单还存在另一个问题(相同的HTML和CSS)，而Venugopal为我提供了正确的答案和jsfiddle演示，所以我也将两者链接。
HTML：
CSS：
@media (min-width: 991px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}
body{
padding-top: 120px;
background-color:#34A0CD;
}
.navbar-default{
height:120px;
}
.navbar-header, .navbar-brand{
height:120px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
home-label{
font-size:17px;
margin-right:35px;
}
.navbar-nav li span{
font-size:17px;
margin-right:35px;
line-height:130px;
}
#topFixedNavbar1{
height:120px;
}
.links{
height:120px;
}
.navbar-nav li a{
padding-top:11px;
padding-bottom:8px;
}
.navbar-nav li a h5{
line-height:80px;
}
.dropdown li a {
line-height:30px;
}
@media (max-width: 991px) {
.dropdown li a{
line-height:30px;
}
.collapse.navbar-collapse{
width:100%;
}
.links li a{
width:100%;
}
.navbar-nav li.open a h5,.navbar-nav li.open a h5:hover {
color: black;
background: 0 0;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: white;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-default navbar-nav .open .dropdown-menu>li>a:focus {
background-color: white;
color: black;
}
.navbar-collapse .navbar-nav>li>a:hover,
.navbar-collapse .navbar-nav>li>a:focus,
.navbar-collapse .navbar-nav .dropdown .dropdown-menu>li>a:hover
.navbar-collapse .navbar-nav .dropdown .dropdown-menu>li>a:focus
{
background-color: gray;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent ;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
}
.navbar-nav>li {
float: none;
}
.navbar-nav li a h5{
line-height: 15px;
background-color: gray;
color: #F1E9E9;
}
.navbar-nav li a span{
line-height:15px;
background-color:gray;
}
.navbar-nav li a{
background-color:gray;
width:100%;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
这是Venugopal提供的带有折叠导航栏的jsfiddle；单击切换后，您应该会看到第一个列表元素和页面右侧之间的边距。谢谢大家的帮助，这是我关于自定义导航栏，更改品牌和高度的第四个问题！ (对于新手而言)
最佳答案
经过多番摆弄，同时发现了Chrome中真正的Dev Tools的强大功能，我发现Bootstrap在ul.nav.navbar-nav.navbar-right类的顶部和底部提供了7.5px的页边距和底部，以及右侧页边距和＃topFixedNavbar1.navbar-collapse.collapse.in上的一些填充。之所以出现这些问题，是因为我希望下拉菜单完全占据屏幕的宽度，并且在折叠时下拉菜单和导航栏本身之间没有背景空间。您可能会想找到一种更明确地写出的方式来更改此方法，但至少它是一遍又一遍的，！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
