Entfernen Bottom Shadow Bootstrap Navbar

Question

Ich benutze Bootstrap default navigation bar für meine Website. Ich möchte, dass die Navigationsleiste und der Inhalt unter der Navigationsleiste die gleiche Farbe haben, ohne dass eine Abgrenzung zwischen ihnen besteht. Es scheint jedoch, dass sich am unteren Rand der Navigationsleiste ein Schatten befindet, den ich nicht loswerden kann.

Ich bin mit Standard-navbar Vorlage des Bootstrap.

ich versucht habe box-shadow: none; auf jedem der navbar Klassen Einstellung I (von der Überprüfung der Elemente) vermuten, dass dies verursacht werden kann (.navbar, .navbar-default und .container-fluid) ohne Erfolg.

nav { 
 
    box-shadow: none; 
 
} 
 
.navbar { 
 
    .container-fluid { 
 
    box-shadow: none; 
 
    } 
 
    box-shadow: none; 
 
} 
 

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

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" 
 
       data-target=".navbar-collapse" 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="#">LOGO-GOES-HERE</a> 
 
    </div> 
 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="">LINK</a></li> 
 
     <li><a href="">LINK</a></li> 
 
     <li><a href="">LINK</a></li> 
 
     <li><a href="">LINK</a></li> 
 
     <li><a href="">LINK</a></li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav>

ich auch bei Bootstrap CSS ausgesehen haben und konnte nicht ausfindig machen, wo die box-shadow herkommt.

Kennt jemand CSS Ich könnte schreiben, um diesen Schatten von der Unterseite der Navigationsleiste zu entfernen, so dass es keine Linie gibt, die die Navbar vom Rest des Inhalts trennt?

Vielen Dank für Ihre Zeit im Voraus.

Answer 1

Dieser Code ist genug:

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

aber sicher, dass der Code nach der Link zu bootstrap-theme.min.css platziert wird. Andernfalls werden Ihre Änderungen nicht funktionieren.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css'); 
 

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

<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" 
 
       data-target=".navbar-collapse" 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="#">LOGO-GOES-HERE</a> 
 
    </div> 
 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="">LINK</a></li> 
 
     <li><a href="">LINK</a></li> 
 
     <li><a href="">LINK</a></li> 
 
     <li><a href="">LINK</a></li> 
 
     <li><a href="">LINK</a></li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav>

Answer 2

denke nicht, daß es einen Kasten Schatten auf dem Bootstrap navbar ist, aber es gibt eine Grenze haben Sie

versucht

.navbar-default{ 
    border:none; 
} 

Answer 3

dieses mein Problem gelöst.

.navbar-default { 
     background:none; 
     box-shadow: none; 
    }