如何獲取twitter-bootstrap導航欄子項目以在小屏幕上摺疊/展開？

Question

twitter-bootstrap'hero'示例（http://twitter.github.io/bootstrap/examples/hero.html）效果很好。冒着描述明顯的風險......在小屏幕上，當導航欄菜單被激活時，只有第一級項目可見，子項目被摺疊。當輕敲帶有子項目的項目時，子項目會展開並變得可見。他們也可以通過再次敲擊父母來摺疊。

我在Joomla網站上使用引導程序模板（http://wright.gvta.net/）。不幸的是，當在小屏幕上激活導航欄時，它擴展了許多子項目。點擊父項不會展開/摺疊其子項。

如何獲取twitter-bootstrap導航欄子項目以在小屏幕上摺疊/展開？ 什麼引導代碼/文件負責這種行爲？

我知道一些CSS和JavaScript，但不足以解決這個問題。

謝謝。

Answer 1

您將需要Bootstrap Collapse JS。然後你需要一個包裝你的導航欄的<div class="nav-collapse collapse">。最後，將data-toggle="collapse"屬性應用於僅在使用CSS媒體查詢的較小屏幕上顯示的按鈕。

查看this example的源代碼的一個工作示例