2017-06-22 3 views
0

Im créer ma barre de navigation qui se composent de logo aligné à gauche et le menu à droite, voici mon code (html et css): comment peut j'aligne les 3 liens vers la droite? je comprends que la classe: nav navbar-nav navbar-right devrait le faire mais il ne va pas, merci!nav navbar-nav navbar-droite ne s'aligne pas à droite, im utilisant Bootstrap 3

h1 { 
 
\t text-align: center; 
 
} 
 

 
.img-thumbnail { 
 
\t border: 0 none; 
 
} 
 
.navbar-custom { 
 
    color: #FFFFFF; 
 
    background-color: transparent; 
 
    border-color: transparent; 
 
} 
 

 
.navbar-toggle { 
 
\t background-color: #000000; 
 
} 
 

 
.collapse .navbar-collapse { 
 
\t float: right; 
 
}
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t \t <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
 
\t \t <link rel="stylesheet" href="css/style.css"> 
 
\t \t <title> Randomoooooooood</title> 
 
\t </head> 
 
\t <body> 
 
\t \t \t 
 
\t \t <header class="navbar navbar-inverse navbar-custom"> 
 
\t \t \t <div class="container-fluid"> 
 
\t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t <div class="col-md-4"> 
 
\t \t \t \t \t \t \t \t <div class="header-left clearfix"> 
 
\t \t \t \t \t \t \t \t \t <div class="logo smooth-scroll"> 
 

 
\t \t \t \t \t \t \t \t \t   <a href="#banner"> <img id="logo" src="img/randomood_log.png" class="col-xs-4 col-sm-4 col-md-4 col-lg-2∫ img-thumbnail" alt="Randomood"></a> 
 
\t \t \t \t \t \t \t \t \t   
 
\t \t \t \t \t \t \t \t \t   
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t  <div class="navbar-header"> 
 
\t \t \t \t \t \t \t \t \t \t  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
\t \t \t \t \t \t \t \t \t \t   <span class="icon-bar"></span> 
 
\t \t \t \t \t \t \t \t \t \t   <span class="icon-bar"></span> 
 
\t \t \t \t \t \t \t \t \t \t   <span class="icon-bar"></span> 
 
\t \t \t \t \t \t \t \t \t \t  </button> 
 

 
\t \t \t \t \t \t \t \t \t  </div> 
 
\t \t \t \t \t \t \t \t \t  <div class="collapse navbar-collapse" id="myNavbar"> 
 

 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t  
 
\t \t \t \t \t \t \t \t \t  <ul class="nav navbar-nav navbar-right"> 
 
\t \t \t \t \t \t \t \t \t   <li><a href="#">Page 1</a></li> 
 
\t \t \t \t \t \t \t \t \t   <li><a href="#">Page 2</a></li> 
 
\t \t \t \t \t \t \t \t \t   <li><a href="#">Page 3</a></li> 
 
\t \t \t \t \t \t \t \t \t  </ul> 
 

 
\t \t \t \t \t \t \t \t \t \t </div> \t  
 

 
\t \t \t \t \t \t </div> \t  
 
\t \t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </header> 
 
\t \t \t \t 
 
\t \t \t 
 
\t <script src="js/jquery-1.11.3.min.js"></script> 
 
    <script src="js/bootstrap.min.js"></script> \t \t 
 
\t </body> \t 
 
</html>

Répondre

0

.navbar-collapse est un frère de .col-md-4, ce dernier qui force votre tête, à utiliser seulement 1/3 de l'espace total disponible.

+0

Merci beaucoup! Ça a marché. –