nav navbar-nav navbar-right 不会向右对齐，我使用 Bootstrap 3

Question

我正在创建我的导航栏，其中包含左对齐的徽标和右对齐的菜单，这是我的代码（html 和 css）：如何将 3 个链接对齐到正确的？我知道 class: nav navbar-nav navbar-right 应该这样做，但不会，谢谢！

h1 {
 text-align: center;
}

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

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

.collapse .navbar-collapse {
 float: right;
}

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

                 <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>
                 
                 
          </div>
             <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span> 
                </button>

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

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

          </div>       

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

Answer 1

.navbar-collapse 是 .col-md-4 的兄弟姐妹，后者强制您的 header 仅使用可用总数的 1/3 space.

nav navbar-nav navbar-right 不会向右对齐，我使用 Bootstrap 3

nav navbar-nav navbar-right wont align to the right, im using Bootstrap 3

alignment

nav

navbar

twitter-bootstrap