隨着寬度的增加，連續填充twitter-bootstrap導航菜單。

我正在使用默認的Twitter Bootstrap響應式導航欄（從移動設備開始工作）。我希望菜單隨着導航欄寬度的擴大而不斷填充。隨着寬度的增加，連續填充twitter-bootstrap導航菜單。

我現在的導航（非常適用於移動）

[ menu item 1 | menu item 2 | menu item 3 | all items ]

然而，由於寬度擴大，我想用更多的菜單項列表。

[ menu item 1 | menu item 2 | menu item 3 | menu item 4 | all items ]

來源

2016-02-05 Eoin Traynor

Bootstrap有一個'隱藏'類，它會隱藏基於大小的元素，它會在類的後面加上後綴。 Bootstrap爲您提供了在某些斷點處觸發的這些類：hidden-xs，hidden-sm，hidden-md，hidden-lg。

在方案

所以，你可以做這樣的事情：

<ul> 
    <li>Menu Item 1</li> 
    <li>Menu Item 2</li> 
    <li>Menu Item 3</li> 
    <li>Menu Item 4</li> 
    <li class="hidden-xs hidden-sm">Item 5</li> 
    <li class="hidden-xs hidden-sm hidden-md">Item 6</li> 
<ul>

基本上，這些類意味着該元素將被隱藏，直到它落入斷點範圍的那些隱藏的類覆蓋之外，在這種情況下，md和lg爲最後2個元素。或者，Bootstrap有一組可見的類，這種類可以做相反的事情，在這種情況下，你可以將'hidden'類放在你想要隱藏的任何東西上，然後應用'visible- [size] - [display property]'class（例如：'visible-lg-inline'或'visible-lg-inline-block'，在你的情況下），當它們落入特定的斷點範圍時顯示菜單項。

<ul> 
    <li>Menu Item 1</li> 
    <li>Menu Item 2</li> 
    <li>Menu Item 3</li> 
    <li>Menu Item 4</li> 
    <li class="hidden visible-md-inline visible-lg-inline">Menu Item 5</li> 
    <li class="hidden visible-lg-inline">Menu Item 6</li> 
<ul>

這一切都是在假設你不是要動態地添加內容基於斷點，並且這些菜單項已經在你的HTML代碼中存在的DOM。否則，你將不得不使用自定義的Javascript/jQuery腳本來做到這一點。

來源

2016-02-05 18:09:44 Brett84c

隨着寬度的增加，連續填充twitter-bootstrap導航菜單。

回答

相關問題