Bootstrap 3.1.1導航欄不同佈局時摺疊

Question

我試圖在所有設備上共享導航欄，但我希望它在小屏幕上的格式不同於大。我是Bootstrap的新手，所以這可能是顯而易見的，但我無法通過一組代碼正確獲取菜單，也沒有嘗試使用不同的行和列設置來完成此操作。

Bootply Sample 實際上我想要兩件東西。我希望勝利和失敗是在同一條線上（這條線沒有導航欄右側），除非它們甚至不處於垂直位置。 編輯：我可以糾正這一點，當刪除navbar權利等，但沒有得到navbar權利，當菜單濃縮。

其次，我想要導航欄的右側，所以當在一個小型顯示器上時，所有的徽章都對齊在菜單的右側。

有沒有辦法讓菜單更小，所以在平板電腦上，它可能不是在手機上的整個屏幕寬度？

當導航欄正常繪製時，我希望標籤旁邊的徽章可以將菜單項縮小/緊密放在一起。只有在下拉菜單中，我希望它們向右移動。

我是否需要創建兩個導航副本才能實現此目的？

Answer 1

首先，如果您刪除了那些navbar-right類，徽章似乎與我對齊。如果你使用這個類只是爲了漂浮他們，你應該使用pull-right，但在這種情況下，沒有必要。其次，如果您將徽章包裹在另一個範圍內，則可以使用媒體查詢將容器浮動到移動設備上。

<span class="badges"> 
    <span class="badge alert-success">Win: 3</span> 
    <span class="badge alert-danger">Loss: 1</span> 
</span> 

/* Note that you can use Bootstrap's '@screen-sm-min' variable if using LESS.*/ 
@media (max-width: 767px) { 
    .badges { 
    float: right; 
    } 
} 

如果你希望你的導航欄是移動全寬，但沒有任何其他設備，你可以嘗試這樣的：

@media (min-width: 768px) { 
    .navbar { 
    width: 80%; 
    margin: 0 auto; 
    } 
} 

Demo

---

編輯

對於變更寬度可以用引導的col-*-*類是這樣的：

<div class="wrap"> 
    <div class="row"> 
    <div class="col-sm-10 col-sm-offset-1"> 
     ... 
    </div> 
    </div> 
</div> 

這意味着移動它會是全寬，但是從縱向平板電腦什麼向上將佔用12電網10。

Demo