自舉導航欄中的白線

Question

我在bootstrap中做了一個導航欄，它的響應速度很快。但是，當我在移動，我按下「切換」按鈕有一個白線，我不能擺脫，其頂部和菜單之間（當你切換）。我剛開始引導。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 

 
    @font-face { 
 
    font-family: "Nexa Light"; 
 
    src: url('../font/Nexa%20Light.otf'); 
 
    } 
 

 
    .navbar-default { 
 
    background-color: black; 
 
    padding: 0; 
 
    margin: 0; 
 
    border-radius: 0; 
 
    border: none; 
 
    font-size: 17px; 
 
    } 
 

 
    .navbar-default .navbar-brand, 
 
    .navbar-default .navbar-brand:hover, 
 
    .navbar-default .navbar-brand:focus { 
 
     color: #FFF; 
 
    } 
 

 
    .navbar-default .navbar-nav > li > a { 
 
     color: #FFF; 
 
    } 
 

 
    .navbar-default .navbar-nav > li > a:hover, 
 
    .navbar-default .navbar-nav > li > a:focus { 
 
     background-color: rgb(44, 44, 45); 
 
     color: #dedede; 
 

 
    } 
 

 
    .navbar-default .navbar-nav > .active > a, 
 
    .navbar-default .navbar-nav > .active > a:hover, 
 
    .navbar-default .navbar-nav > .active > a:focus { 
 
     color: #FFF; 
 
     background-color: rgb(44, 44, 45); 
 
    } 
 

 
    .navbar-default .navbar-text { 
 
     color: #FFF; 
 
    } 
 

 
    .navbar-default .navbar-toggle { 
 
     border-color: rgb(44, 44, 45); 
 

 
    } 
 

 
    .navbar-default .navbar-toggle:hover, 
 
    .navbar-default .navbar-toggle:focus { 
 
     background-color: rgb(44, 44, 45); 
 
    } 
 

 
    .navbar-default .navbar-toggle .icon-bar { 
 
     background-color: #FFF; 
 
    } 
 

 
    .col-md-12 { 
 
    height: 500px; 
 
    padding: 20px; 
 
    }

<link rel="shortcut icon" href="img/favicon2.ico" type="image/x-icon"> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="css/style.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> 
 
    
 
    <!-- NAVIGATIE BALK --> 
 
    <nav class="navbar navbar-default" role="navigation"> 
 
    <!-- logo --> 
 
    <div class="navbar-header"> 
 
     <!-- --> 
 
     <a class="navbar-brand" href="#"> 
 
     <img src="img/LOGO2.png" alt="Brand" style="height: 100%" /> 
 
     </a> 
 

 
     <!-- Inklappbaar ding als je op mobiel zit--> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainnavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 
    <!-- menu eitems linker kant--> 
 
    <div class="collapse navbar-collapse" id="mainnavbar"> 
 
     <ul class="nav navbar-nav"> 
 

 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Over mij</a></li> 
 
     <li><a href="#">Contact</a></li> 
 

 
     <!-- Dropdown --> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profiel <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Profiel</a></li> 
 
       <li><a href="#">Instellingen</a></li> 
 
       <li><a href="#">Log uit</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 

 
     <!-- Aan de rechterkant --> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Uitloggen</a></li> 
 
     </ul> 
 

 
    </nav> 
 

 
    <!-- EINDE NAVIAGTIE BALK--> 
 

 

 

 
    <div class="container-fluid"> 
 

 
    <div class="row"> 
 
     <div class="col-xs-12 col-md-12" style="background: lightblue;">Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width 
 
     Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width 
 
     Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width 
 
     Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width 
 
     Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width 
 
     Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width 
 
     </div> 
 
     <div class="col-xs-12 col-md-12" style="background: lightcoral;">Phone entire width, Desktop 1/2 width</div> 
 
     <div class="col-xs-12 col-md-12" style="background: lightgreen;">Phone entire width, Desktop 1/2 width</div> 
 
    </div> 
 

 
    </div>

Answer 1

添加以下樣式。這將同時刪除邊框顏色和箱陰影：

.navbar-default .navbar-collapse, .navbar-default .navbar-form { 
    border-color: transparent; 
    box-shadow: none; 
} 

Answer 2

如果我的理解：

.navbar-collapse這個引導類加載1px的邊框

.navbar-default .navbar-collapse這個自舉類添加顏色＃e7e7e7邊境

您可以覆蓋此行使用您的自定義CSS。

Answer 3

嘗試使用此代碼。它將刪除不需要的線

.navbar.navbar-default .navbar-collapse {border: none; box-shadow: none;}