引導不會停止添加第二行我導航欄

Question

我有以下HTML：加上

<nav class="navbar pr-navbar navbar-fixed-top" role="navigation"> 
    <div class="navbar-header"> 
     <div class="row"> 
      <div class="navbar-left"> 
       <a plat-tap='goBack()'><span class="fui-arrow-left pr-back"></span></a> 
      </div> 
      <div class="navbar-right"> 
       <a plat-tap='goHome()'><span class="glyphicon glyphicon-home pr-home"></span></a> 
      </div> 
      <p class="pr-navbar-text">Manage/Add Users</p> 
      <div class="navbar-right"> 
       <div class="pr-add-item"> 
        <a plat-tap='addUser()'><span class="fui-plus"></span></a> 
       </div> 
      </div> 
     </div> 
    </div> 
</nav> 

以下LESS：

@primaryColor: red; 
@secondaryColor: blue; 
@borderColor: white; 
@textColor: white; 

.pr-back{ 
    color: @textColor; 
} 

.pr-home{ 
    color: @textColor; 
} 

.pr-navbar-text{ 
    color: @textColor; 
    text-align: center; 
} 

.pr-navbar { 
    background-color: @secondaryColor; 
    background-image: none; 
    background-repeat: no-repeat; 
    filter: none; 
} 

body { padding-top: 75px; } 
@media screen and (max-width: 768px) { 
    body { padding-top: 53px; } 
} 

.pr-add-item { 
    padding-right: 75px 
} 

出於某種原因，在row元素我HTML什麼都不做。 plus圖標始終放在所有其他按鈕下方的一行中。我怎樣才能解決這個問題，所以我有一排左對齊的按鈕，一箇中心文本和兩個右對齊的按鈕？

Answer 1

在這裏，我開始了這個小提琴。

JSFiddle here

<nav class="navbar pr-navbar navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
     <div class="nav navbar-nav navbar-left"> 
      <a plat-tap='goBack()'><span class="fui-arrow-left pr-back"></span></a> 
     </div> 
     <div class="nav navbar-nav navbar-right"> 
      <a plat-tap='goHome()'><span class="glyphicon glyphicon-home pr-home"></span></a> 
     </div> 
     <p class="nav navbar-nav pr-navbar-text">Manage/Add Users</p> 
     <div class="nav navbar-nav navbar-right"> 
      <div class="pr-add-item"> 
       <a plat-tap='addUser()'><span class="glyphicon glyphicon-plus"></span></a> 
      </div> 
     </div> 
    </div> 
</nav> 

這個HTML更接近你想要什麼。原始HTML中包含一些不必要的標籤，還有一些重要標籤（如nav和navbar-nav）被排除。我建議你閱讀引導組件頁面的this section以瞭解如何讓NavBars更加協作地工作。

（我改變了你的加號按鈕和後退箭頭按鈕的字形，這樣就不會出現平面UI）。

編輯：更改JSFiddle，以便文本可以居中在導航欄中。