Enlever Bottom Shadow Bootstrap Navbar

Question

J'utilise Bootstrap default navigation bar pour mon site web. Je voudrais que la barre de navigation et le contenu sous la barre de navigation soient de la même couleur, sans aucune démarcation entre eux. Cependant, il semble qu'il y ait une ombre au bas de la barre de navigation dont je n'arrive pas à me débarrasser.

J'utilise le modèle par défaut de navbar Bootstrap.

J'ai essayé de placer box-shadow: none; sur chacune des classes de navbar je soupçonne (d'inspecter les éléments) peuvent être la cause (.navbar, .navbar-default et .container-fluid) en vain.

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>

J'ai aussi regardé le CSS Bootstrap et ne pouvait pas localiser le box-shadow vient.

Est-ce que quelqu'un connaît des CSS que je pourrais écrire pour enlever cette ombre au bas de la barre de navigation, de sorte qu'il n'y a pas de ligne séparant la barre de navigation du reste du contenu?

Merci beaucoup pour votre temps à l'avance.

Answer 1

Ce code est assez:

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

Mais assurez-vous que le code est placé après le lien vers bootstrap-theme.min.css. Sinon, vos modifications ne fonctionneront pas.

@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

Ne pas penser qu'il ya une ombre de boîte sur la barre de navigation bootstrap mais il y a une frontière avez-vous essayé

.navbar-default{ 
    border:none; 
} 

Answer 3

celui-ci a résolu mon problème.

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