如何正確對齊Bootstrap NavBar中的登錄按鈕而沒有切換？

我正在嘗試使用Twitter Bootstrap爲我的網站的註冊頁面創建一個標題欄。每documentation我想取代我的網站的名字的品牌，然後我想放一個登錄按鈕相反它的導航欄的右側：如何正確對齊Bootstrap NavBar中的登錄按鈕而沒有切換？

<body> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
      <a href="#" class="navbar-brand">Brand</a> 
      </div> 
      <button type="button" class="btn btn-default navbar-btn">Sign in</button> 
     </div> 

     <div class="pull-right"> 
      <ul class="nav navbar-nav"> 
       <li><button type="submit" class="btn navbar-btn" >Sign In</button></li> 
      </ul>  
     </div>   
    </nav> 
</body>

我沒有」不要將「導航欄切換摺疊」按鈕放在我的代碼中，因爲我不想讓登錄按鈕切換到手機上的切換按鈕。相反，我只想在導航欄的右側顯示一個登錄按鈕，就像它在計算機瀏覽器中一樣。我遇到的問題是，上面的代碼在電話上創建了一個高兩排（左右）導航欄，左上角的品牌鏈接和右下角的登錄按鈕導航欄。如何更改此代碼，以便品牌鏈接和登錄按鈕在同一行上彼此對齊？所有顯示如何將按鈕向左或向右移動的示例都假設您要在手機上顯示切換按鈕。我不。我希望登錄按鈕出現在所有設備上。

感謝。

來源

2016-05-25 William

可能有很多方法可以達到這個目標，但我認爲只要依靠Bootstrap來處理它，就不可能開箱即可。

簡單的解決方案，只需定位您的登錄按鈕absolutely。

見工作實例：

.navbar .login-btn { 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 15px; 
 
} 
 
@media (max-width: 767px) { 
 
    .navbar .login-btn { 
 
    right: 75px; 
 
    } 
 
}

<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.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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 href="#" class="navbar-brand">Website Name</a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="navbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    <button type="submit" class="btn btn-danger navbar-btn login-btn">Sign In</button> 
 

 
    </div> 
 
</nav>

來源

2016-05-25 23:58:14 vanburen

非常感謝您！這工作。我是Bootstrap的新手，但我還沒有形成對Bootstrap能做什麼的理解，以及我必須在Bootstrap之外做什麼。我非常感謝你的幫助！ – William

如何正確對齊Bootstrap NavBar中的登錄按鈕而沒有切換？

回答

相關問題