Twitter Bootstrap：隱藏小屏幕中的子菜單

如果我們有子菜單，那麼默認情況下它們是可見的，我們必須滾動並滾動。 Plz看起來是我想要的，但它是Bootstrap以前的版本。我搞清楚了2.1.1，我相信它應該是在引導（他們已經在新版本中改變了很多東西）Twitter Bootstrap：隱藏小屏幕中的子菜單

PLZ看看這裏默認功能：

http://jsfiddle.net/nczJF/

我尋找這樣的菜單行爲，其中主菜單和子菜單僅通過點擊相關子菜單出現。我搜索了很多，但所有這些都是Bootstraps以前的版本。那麼有專家意見的任何人？

來源

2012-10-15 mrto2

的工作的jsfiddle這樣對我。我必須手動打開菜單，然後手動打開每個子菜單。 –

http://jsfiddle.net/nczJF/39/

本品採用最新引導的版本。唯一的區別是CSS，JS是一樣的。

在自舉-responsive.css，除去display: block（不切換，以顯示無）從：

.nav-collapse .dropdown-menu { 
    position: static; 
    top: auto; 
    left: auto; 
    float: none; 
    display: block; /* remove this line! */ 
    max-width: none; 
    padding: 0; 
    margin: 0 15px; 
    background-color: transparent; 
    border: none; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
      border-radius: 0; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
      box-shadow: none; 
}

在同一文件中，朝向底部，更改height: 0到height: auto：

.nav-collapse, 
.nav-collapse.collapse { 
    height: auto; /* instead of 0 */ 
    overflow: hidden; 
}

然後，要修復默認的擴展視圖，請更改您的html。類collapsed添加到摺疊按鈕：

<button type="button" class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">

而且改變

<div class="nav-collapse">

到

<div class="nav-collapse collapse" style="height: 0px; ">

這可能是與編輯JS更優雅，但這個工程在不改變其他文件。

我推集成該功能在這裏：https://github.com/twitter/bootstrap/issues/5606

來源

2012-10-30 18:00:38 Archonic

最受歡迎=） – Archonic

非常感謝Archonic！你已經解決了引導中的一個大問題！是的，它必須默認包含在內。關於這個問題還有更多的事情，我相信你也可以解決它們。 1）我們如何設置這個菜單的高度？即如果我們有很多子菜單，我們應該確定菜單的總高度，這樣用戶可能不會全部向下滾動，但他應該從右側的滾動條滾動以查看更多菜單。 2）如果我們在子菜單中有更多的菜單，它們在鼠標懸停在移動視圖時摺疊。那麼，我們如何才能在點擊時改變它，而不是隻是懸停？ Regards – mrto2

1）固定菜單的高度會限制你可以添加到它的選項。爲了不限制自己，我建議編輯導航欄組件的.less文件。我不完全確定你的意思 - 嘗試開始一個新的jsfiddle並解釋你想要的行爲。 2）您可以在桌面上看到移動解決方案，但移動用戶沒有鼠標，因此沒有懸停操作。例外是如果他們使用某種類型的手寫筆。儘管如此，它不應該發生，我會研究它 - 可能只是一個HTML問題。再次，一個jsfiddle會有所幫助。 – Archonic

Twitter Bootstrap：隱藏小屏幕中的子菜單

回答

相關問題