如何刪除自舉導航欄和下拉項目之間的差距

如果我的導航欄和下拉項目之間的這個小透明間隙我正在努力尋找源代碼。它正在殺死我。任何人都可以伸出援手並幫我找到並移除它？如何刪除自舉導航欄和下拉項目之間的差距

我的HTML

<!-- Static navbar --> 
<nav id="custom-bootstrap-menu" class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <div id="navlogo">    
      <a class="navbar-brand" href="#">CHEEZ-IT!</a> 
      </div> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li><a href="#">Home</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Who are Cheez-it's</a></li> 
       <li><a href="#">Credentials</a></li> 
       </ul> 
      </li> 
      <li><a href="#contact">Our Services</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Industries <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Cheeze-it Solar</a></li> 
       <li><a href="#">Cheeze-it Infrastructure</a></li> 
       <li><a href="#">Cheeze-it Harvest</a></li>     
       </ul> 
      </li> 

      <li><a href="#contact">Partners</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav>

這裏是我的CSS，但我不認爲任何這導致它。

#custom-bootstrap-menu.navbar-default .navbar-brand { 
    color: #fbb216; 
} 
#custom-bootstrap-menu.navbar-default { 
    font-size: 14px; 
    background-color: rgba(13, 65, 103, 1); 
    border-width: 0px; 
    border-radius: 0px; 
} 
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a { 
    color: rgba(255, 255, 255, 1); 
    background-color: rgba(13, 65, 103, 1); 
} 
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover, 
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus { 
    color: rgba(13, 65, 103, 1); 
    background-color: rgba(255, 255, 255, 1); 
} 
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a, 
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover, 
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus { 
    color: rgba(13, 65, 103, 1); 
    background-color: rgba(255, 255, 255, 1); 
} 
#custom-bootstrap-menu.navbar-default .navbar-toggle { 
    border-color: #ffffff; 
} 
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover, 
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus { 
background-color: #ffffff; 
} 
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar { 
background-color: #ffffff; 
} 
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar, 
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar { 
background-color: #ffffff; 
}

感謝任何幫助！謝謝

來源

2015-10-13 Jalapeno Jack

您需要發佈您的HTML以及。 – vanburen

根據您提供的代碼，我沒有看到您的照片顯示的空間。我檢查了FF，Chrome和IE的最新版本 – crazymatt

你可以將它發佈在代碼或其他東西上，以便我們現場查看它 –

這條規則（border-width: 0px;）正在造成這個差距。

您可以添加一個底部邊框是這樣的顏色相同的navbar（或者您也可以通過1px的減少dropdown-menu類的邊緣，但它看起來笨拙，因爲dropdown-menu不是完全內嵌在dropdown觸發）。

保證金替代做法

@media (min-width: 768px) { 
    #custom-bootstrap-menu.navbar-default .dropdown-menu { 
     border: none; 
     margin-top: -1px; 
    } 
}

下邊框的方法：見工作實例

html { 
 
    background-color: red; 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-brand { 
 
    color: #fbb216; 
 
} 
 
#custom-bootstrap-menu.navbar-default { 
 
    font-size: 14px; 
 
    background-color: rgba(13, 65, 103, 1); 
 
    border: none; 
 
    border-bottom: 1px solid rgba(13, 65, 103, 1); 
 
    border-radius: 0px; 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-nav > li > a { 
 
    color: rgba(255, 255, 255, 1); 
 
    background-color: rgba(13, 65, 103, 1); 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-nav > li > a:hover, 
 
#custom-bootstrap-menu.navbar-default .navbar-nav > li > a:focus { 
 
    color: rgba(13, 65, 103, 1); 
 
    background-color: rgba(255, 255, 255, 1); 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-nav > .active > a, 
 
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover, 
 
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus { 
 
    color: rgba(13, 65, 103, 1); 
 
    background-color: rgba(255, 255, 255, 1); 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle { 
 
    border-color: #ffffff; 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover, 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus { 
 
    background-color: #ffffff; 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar { 
 
    background-color: #ffffff; 
 
} 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar, 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar { 
 
    background-color: #ffffff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<nav id="custom-bootstrap-menu" class="navbar navbar-default navbar-static-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> 
 
     <div id="navlogo"> <a class="navbar-brand" href="#">CHEEZ-IT!</a> 
 

 
     </div> 
 
    </div> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home</a> 
 

 
     </li> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us <span class="caret"></span></a> 
 

 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Who are Cheez-it's</a> 
 

 
      </li> 
 
      <li><a href="#">Credentials</a> 
 

 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#contact">Our Services</a> 
 

 
     </li> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Industries <span class="caret"></span></a> 
 

 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Cheeze-it Solar</a> 
 

 
      </li> 
 
      <li><a href="#">Cheeze-it Infrastructure</a> 
 

 
      </li> 
 
      <li><a href="#">Cheeze-it Harvest</a> 
 

 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#contact">Partners</a> 
 

 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!--/.nav-collapse --> 
 
    </div> 
 
</nav>

來源

2015-10-13 21:15:24 vanburen

非常感謝！ –

不客氣，很高興我能幫到你。 – vanburen

如何刪除自舉導航欄和下拉項目之間的差距

回答

相關問題