崩潰Bootstrap 3導航欄的位置內容

我試圖創建一個部分崩潰的導航欄。在導航欄上對齊元素時，圖標位置錯誤。我想讓圖標位於右側，就在摺疊按鈕的前面，如下圖所示。崩潰Bootstrap 3導航欄的位置內容

desired image 。

我已經嘗試了很多不同的組合，但一直無法正確定位。

如何將圖標移動到導航欄的另一側？

下面是我的代碼，並與圖標不需要輸出左側

undesired output 。

<nav class="navbar navbar-default"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
      <a class="btn navbar-btn navbar-right btn-social-icon btn-xs btn-twitter"> 
       <i class="fa fa-twitter"></i> 
      </a> 
     <a class="navbar-brand" href="#">{{title}}</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav pull-right"> 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a></li> 
      <li><a href="#">Item 3</a></li> 
      <li><a href="#">Item 4</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
</div><!--/.container-fluid -->

來源

2015-07-04 Calyce

請張貼正確的代碼。您發佈的HTML不適用於第一張圖片。 – Wazaaaap

第一張照片是所需的結果。它被編輯。第二張照片是提供的代碼的結果。 – Calyce

類pull-right只需添加到包含圖標的按鈕。

<a class="btn navbar-btn navbar-right btn-social-icon btn-xs btn-twitter pull-right"> 
    <i class="fa fa-twitter"></i> 
</a>

來源

2015-07-04 13:50:34 Wazaaaap

剛剛測試過它，它的工作原理。非常感謝。 – Calyce

崩潰Bootstrap 3導航欄的位置內容

回答

相關問題