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

很抱歉标题很长，但如前所述，当窗口折叠时，第一个下拉元素和主导航栏之间有一个边距。右侧还有一个丑陋的边距是不受欢迎的。我已经包含了我的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;单击切换开关时，您应该看到第一个列表元素和页面右侧之间的边距。谢谢大家的帮助，这是我关于自定义导航栏的第四个问题，更改品牌和高度真的会把事情搞砸！（反正对于菜鸟）

经过多次摆弄，在发现Chrome中的开发工具到底有多强大的同时，我发现Bootstrap在ul.nav.navbar-nav.navbar-right类上提供了7.5px的顶部和底部边距，并在#topFixedNavbar1.navbar-collapse.collapse.in 上提供了右边距和一些填充。.这些问题的出现都是因为我希望我的下拉菜单完全跨越屏幕的宽度，并且在折叠时下拉菜单和导航栏本身之间没有背景空间。你会认为会有一种更明确地写下来的方法来改变这一点，但至少它已经完成了，结束了，呵呵！

相关内容

最新更新

热门标签：