nav navbar-nav navbar-rechts wird nicht rechts ausgerichtet, ich benutze Bootstrap 3

Im Erstellen meiner Nav-Leiste, die aus Logo nach links ausgerichtet und Menü auf der rechten Seite, hier ist mein Code (html und css): wie kann Ich richte die 3 Links nach rechts aus? Ich verstehe, dass die Klasse: Nav Navbar-Nav Navbar-Recht sollte es tun, aber es wird nicht, danke!nav navbar-nav navbar-rechts wird nicht rechts ausgerichtet, ich benutze 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>

Quelle

2017-06-22 Liliana Orozco

.navbar-collapse ist ein Geschwister von .col-md-4, von denen die letztere Ihren Kopf zwingt, nur ein Drittel des gesamten verfügbaren Raumes zu nutzen.

Quelle

2017-06-22 18:05:17

Vielen Dank! Das hat funktioniert. –

nav navbar-nav navbar-rechts wird nicht rechts ausgerichtet, ich benutze Bootstrap 3

Antwort

Verwandte Themen