Ich benutze Bootstrap 3 für meine Website. Ich habe die üblichen .navbar auf der Seite, und es funktioniert gut, bis auf eine Sache, die aus meiner Mode ist. Es gibt eine kleine Trennlinie zwischen den .navbar-collapse und .navbar-header, wenn der Bildschirm auf das Hamburger-Menü schrumpft. Ich habe es auf dem Bild gebohrt.Loswerden dünne Trennlinie über Navbar, Bootstrap3

HTML

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
    <title>Stuson.com</title> 
    <meta name="description" content="Stuson.com is a social media platform for students, by students."> 
    <meta name="author" content="Stuson Dev Team"> 
    <link href="https://fonts.googleapis.com/css?family=PT+Sans|Roboto" rel="stylesheet"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link href="css\essentials.css" rel="stylesheet"> 
    </head> 
    <body> 
    <nav class="navbar navbar-default" role="navigation"> 
     <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-target="#bs-example-navbar-collapse-1" 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="#">Brand</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <form class="navbar-form navbar-left" role="form"> 
      <div class="form-group"> 
       <input type="text" class="form-control hidden-xs" placeholder="Search"> 
      </div> 
      <button type="submit" class="btn btn-default"> 
       <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
       <span class="hidden-lg hidden-md">Search</span> 
      </button> 
      </form> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
    </nav> 

    <script src="http://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    <script src="js/essentials.js"></script> 
    </body> 
</html>

CSS

#noBorder { 
    border-style: none; 
    border-radius: 0; 
} 
#transparent { 
    background-color: transparent; 
} 
body { 
    font-family: "PT Sans", sans-serif; 
    font-weight: 300; 
} 
.navbar { 
    border-style: none; 
    border-radius: 0; 
    background-color: #38ba7d; 
} 
.navbar .navbar-header { 
    border-style: none; 
    border-radius: 0; 
} 
.navbar .navbar-header > .navbar-toggle, 
.navbar .navbar-header .navbar-toggle:hover, 
.navbar .navbar-header .navbar-toggle:focus { 
    border-style: none; 
    border-radius: 0; 
    background-color: transparent; 
} 
.navbar .navbar-header .navbar-brand { 
    color: #fff; 
} 
.navbar .navbar-collapse { 
    border-style: none; 
    border-radius: 0; 
} 
.navbar .navbar-collapse ul li > a { 
    color: #fff; 
} 
.navbar .navbar-collapse form { 
    display: flex; 
    flex-direction: row; 
    border-style: none; 
    border-radius: 0; 
} 
.navbar .navbar-collapse form input { 
    width: 250px; 
} 
@media (max-width: 786px) { 
    .navbar .navbar-collapse form input { 
    width: 10px; 
    } 
} 
.navbar .navbar-collapse form .btn { 
    background-color: transparent; 
    border-style: none; 
    border-radius: 0; 
}

Wie kann ich das vermeiden? Ich habe versucht, mit border: none auf .navbar-collapse und .navbar-header, aber ohne Erfolg.

Quelle

2017-02-05 Aravind Suresh

Können Sie Ihren Code schreiben? – abl

Tatsächlich ist die 'Grenze' wird von einem box-shadow verursacht, so fügen Sie diese:

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

Quelle

2017-02-05 16:06:21 Tomer

Das hat funktioniert! DANKE! –

Sie können diesen CSS-Code-Snippet verwenden:

@media (max-width: 768px) { 
    .navbar-default .navbar-collapse, .navbar-default .navbar-form { 
     border: 0; 
    } 
}

Quelle

2017-02-05 15:52:11 herrh

Nein, das funktioniert nicht ... –

Einstellung .navbar-default oder .navbar-invers 0 sollte es tun.

.navbar-default { 
    border: 0; 
}

Quelle

2017-02-05 15:52:18 Hue

Keine Zigarre. Das funktioniert nicht für mich. –

Loswerden dünne Trennlinie über Navbar, Bootstrap3

HTML

CSS

Antwort

Verwandte Themen