Как сделать так, чтобы на маленьких экранах разворачивались / разворачивались подпункты Twitter-bootstrap navbar?

Question

Пример "героя" в твиттере-загрузчике ( http://twitter.github.io/bootstrap/examples/hero.html) работает хорошо. С риском описания очевидного... На маленьких экранах, когда активировано меню панели навигации, видны только элементы первого уровня, подпункты свернуты. При касании элемента с дочерними элементами дочерние элементы раскрываются и становятся видимыми. Их также можно свернуть, снова нажав на родителя.

Я использую шаблон начальной загрузки на сайте Joomla ( http://wright.gvta.net/). К сожалению, когда на маленьком экране активируется навигационная панель, она расширяет многие подпункты. Нажатие на родительский элемент не разворачивает / сворачивает его дочерние элементы.

Как сделать так, чтобы на маленьких экранах разворачивались / разворачивались подпункты Twitter-bootstrap navbar? Какой код / ​​файлы начальной загрузки ответственны за это поведение?

Я знаю некоторые CSS и Javascript, но не достаточно, чтобы понять это.

Спасибо.

Answer 1

Вам понадобится Bootstrap Collapse JS. Тогда вам нужно <div class="nav-collapse collapse"> это оборачивает ваш navbar. Наконец, примените data-toggle="collapse" Атрибут для кнопки, которая появляется только на небольших экранах с использованием медиазапросов CSS.

См. Исходный код этого примера для рабочего примера