Question

对于长标题很抱歉，但正如所述，当窗口折叠时，第一个下拉元素和主导航栏之间有一个边距。右侧还有一个丑陋的边缘是不受欢迎的。我已经包含了我的HTML和CSS，虽然我在下拉列表中遇到了另一个问题（相同的HTML和CSS），Venugopal为我提供了正确的答案和一个jsfiddle演示，所以我也将链接到这两个。

HTML：

<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-    toggle="collapse" data-parent="#accordion" data-target="#topFixedNavbar1"  aria-    expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    <a class="navbar-brand" href="#"><h2>LOGO</h2></a></div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="topFixedNavbar1">



    <ul class="nav navbar-nav navbar-right links">
      <li><a href="#"><h5>Link 1</h5></a></li>
      <li><a href="#"><h5>Link 2</h5></a></li>

      <li class="dropdown"><a href="#" class="dropdown-toggle" data-    toggle="dropdown" data-parent="#accordion" role="button" aria-haspopup="true"    aria-expanded="false"><h5>Dropdown</h5></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>

          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
      <li><a><span class="label label-danger  home-label" >Give us a call! &nbsp;</span></a></li>
    </ul>
  </div>
  <!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->

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折叠导航栏;单击切换时，您应该看到第一个列表元素和页面右侧之间的边距。谢谢大家的帮助，这是我关于自定义导航栏的第四个问题，改变品牌和高度确实让人感觉很糟糕！（无论如何，对于一个菜鸟）

Answer 1

经过多次摆弄，同时发现Chrome中Dev Tools的强大功能，我发现Bootstrap在 ul.nav.navbar-nav.navbar-right <上提供了7.5px的上下边距。 / strong>类以及右边距和＃topFixedNavbar1.navbar-collapse.collapse.in 上的一些填充。这些问题都出现了，因为我希望我的下拉菜单完全跨越屏幕的宽度，并且在折叠时下拉菜单和导航栏本身之间没有背景空间。你会认为有一种更明确的方式可以改变这种情况，但至少它已经完成并且结束了，p！

折叠的导航栏在第一个下拉列表元素主菜单和右边距之间具有边距

1 个答案: