navbar-right在自舉導航中沒有響應

Question

我正在嘗試創建一個小的Sinatra應用程序。目前，試圖在bootstrap的幫助下建立一個條件導航欄。我正在嘗試使用navbar-right在右側顯示註冊/登錄/註銷鏈接，但它無法正常工作。它只顯示左側的所有內容。我對導航欄的代碼看起來像下面..

編碼提示

  <!-- Collect the nav links, forms, and other content for toggling --> 
      <div > 

      <!-- Main nav bar --> 
      <ul class="navbar-right nav navbar-nav"> 
       <% if logged_in? %> 
       <li> 
        <a href="/user/tips">User's tips</a> 
       </li> 
       <li> 
        <a href="/tips/new">New Tip</a> 
       </li> 
       <li> 
        <a href="/logout"> Sign out</a> 
       </li> 
       <% else %> 
        <li> 
        <a href="/signup">Sign Up</a> 
        </li> 
        <li> 
        <a href="/login">Sign In</a> 
        </li> 
       <% end %> 
       </ul> 
      </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
     </nav> 

我也加入到style.css的自定義樣式導航欄我，它看起來像下面..

./*///// NAVBAR ////*/ 
/* while header */ 
.navbar-default { background-color: #111111; border-color: transparent; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 300; letter-spacing: 1px; font-size: 5em; /* while fixed */ } 
.navbar-default .navbar-header .navbar-brand { font-family: 'Arial', 'sans-serif'; font-size: 1em; color: #31002e; font-weight: 200; text-transform: uppercase; padding: 20px 25px; } 
.navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus { color: #FF0000; } 
.navbar-default .navbar-header .navbar-toggle {font-family: 'Arial', 'sans-serif'; font-size: 1em; color: #31002e; font-weight: 200; text-transform: uppercase; padding: 20px 25px;} 
.navbar-default .nav > li > a { font-family: 'Arial', 'sans-serif'; text-transform: uppercase; letter-spacing: 2px; font-size: 1em; font-weight: 200; color: #31002e; padding: 20px 25px; } 
.navbar-default .nav > li > a:focus { color: #FF0000; } 
.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover { color: #FF0000; } 
.navbar-default .nav > li.active > a { color: #FF0000; background-color: #111111; } 
.navbar-default .nav > li.active > a:focus { color: #FF0000; background-color: #111111; } 
.navbar-default .nav > li.active > a:hover, .navbar-default .nav > li.active > a:focus:hover { background-color: #111111; } 
.navbar-default .nav > li > a.selected { color: #fff; background-color: black;} 
.navbar-default .affix { background-color: #111111; } 
.navbar-default .affix .navbar-header .navbar-brand:hover, .navbar-default .affix .navbar-header .navbar-brand:focus { color: #FF0000; } 
.navbar-default .affix .nav > li.active > a { color: #FF0000; } 
.navbar-default .affix .nav > li.active > a:focus { color: #FF0000; } 
.navbar-default .affix .nav > li > a:hover, .navbar-default .affix .nav > li > a:active, .navbar-default .affix .nav > li > a:focus, .navbar-default .affix .nav > li > a:focus:hover { color: #FF0000; } 

有沒有解決這個問題的建議？

Answer 1

添加pull-right您ul應該修復它：

pull-right類，你可以在這裏找到來源：

.pull-right { 
    float: right !important; 
} 
.pull-left { 
    float: left !important; 
} 

https://github.com/twbs/bootstrap/blob/v3.3.7/dist/css/bootstrap.css#L6519-L6524

. 
 
/*///// NAVBAR ////*/ 
 

 

 
/* while header */ 
 

 
.navbar-default { 
 
    background-color: #111111; 
 
    border-color: transparent; 
 
    -webkit-transition: all 0.35s; 
 
    -moz-transition: all 0.35s; 
 
    transition: all 0.35s; 
 
    font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; 
 
    font-weight: 300; 
 
    letter-spacing: 1px; 
 
    font-size: 5em; 
 
    /* while fixed */ 
 
} 
 

 
.navbar-default .navbar-header .navbar-brand { 
 
    font-family: 'Arial', 'sans-serif'; 
 
    font-size: 1em; 
 
    color: #31002e; 
 
    font-weight: 200; 
 
    text-transform: uppercase; 
 
    padding: 20px 25px; 
 
} 
 

 
.navbar-default .navbar-header .navbar-brand:hover, 
 
.navbar-default .navbar-header .navbar-brand:focus { 
 
    color: #FF0000; 
 
} 
 

 
.navbar-default .navbar-header .navbar-toggle { 
 
    font-family: 'Arial', 'sans-serif'; 
 
    font-size: 1em; 
 
    color: #31002e; 
 
    font-weight: 200; 
 
    text-transform: uppercase; 
 
    padding: 20px 25px; 
 
} 
 

 
.navbar-default .nav > li > a { 
 
    font-family: 'Arial', 'sans-serif'; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    font-size: 1em; 
 
    font-weight: 200; 
 
    color: #31002e; 
 
    padding: 20px 25px; 
 
} 
 

 
.navbar-default .nav > li > a:focus { 
 
    color: #FF0000; 
 
} 
 

 
.navbar-default .nav > li > a:hover, 
 
.navbar-default .nav > li > a:focus:hover { 
 
    color: #FF0000; 
 
} 
 

 
.navbar-default .nav > li.active > a { 
 
    color: #FF0000; 
 
    background-color: #111111; 
 
} 
 

 
.navbar-default .nav > li.active > a:focus { 
 
    color: #FF0000; 
 
    background-color: #111111; 
 
} 
 

 
.navbar-default .nav > li.active > a:hover, 
 
.navbar-default .nav > li.active > a:focus:hover { 
 
    background-color: #111111; 
 
} 
 

 
.navbar-default .nav > li > a.selected { 
 
    color: #fff; 
 
    background-color: black; 
 
} 
 

 
.navbar-default .affix { 
 
    background-color: #111111; 
 
} 
 

 
.navbar-default .affix .navbar-header .navbar-brand:hover, 
 
.navbar-default .affix .navbar-header .navbar-brand:focus { 
 
    color: #FF0000; 
 
} 
 

 
.navbar-default .affix .nav > li.active > a { 
 
    color: #FF0000; 
 
} 
 

 
.navbar-default .affix .nav > li.active > a:focus { 
 
    color: #FF0000; 
 
} 
 

 
.navbar-default .affix .nav > li > a:hover, 
 
.navbar-default .affix .nav > li > a:active, 
 
.navbar-default .affix .nav > li > a:focus, 
 
.navbar-default .affix .nav > li > a:focus:hover { 
 
    color: #FF0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- Collect the nav links, forms, and other content for toggling --> 
 
<div> 
 

 
    <!-- Main nav bar --> 
 
    <ul class="navbar-right nav navbar-nav pull-right"> 
 
    <% if logged_in? %> 
 
     <li> 
 
     <a href="/user/tips">User's tips</a> 
 
     </li> 
 
     <li> 
 
     <a href="/tips/new">New Tip</a> 
 
     </li> 
 
     <li> 
 
     <a href="/logout"> Sign out</a> 
 
     </li> 
 
     <% else %> 
 
     <li> 
 
      <a href="/signup">Sign Up</a> 
 
     </li> 
 
     <li> 
 
      <a href="/login">Sign In</a> 
 
     </li> 
 
     <% end %> 
 
    </ul> 
 
</div> 
 
<!-- /.navbar-collapse --> 
 
</div> 
 
<!-- /.container-fluid --> 
 
</nav>