4

twitter-bootstrap 'hero'예제 (http://twitter.github.io/bootstrap/examples/hero.html)가 잘 작동합니다. 명백한 것을 설명 할 위험이 있습니다 ... 작은 화면에서 navbar 메뉴가 활성화되면 첫 번째 수준 항목 만 표시되고 하위 항목은 축소됩니다. 하위 항목이있는 항목을 두드리면 하위 항목이 확장되어 표시됩니다. 또한 부모를 다시 눌러 접을 수 있습니다.작은 화면에서 twitter-bootstrap navbar 하위 항목을 축소/확장하려면 어떻게해야합니까?

나는 Joomla 사이트 (http://wright.gvta.net/)에서 부트 스트랩 템플릿을 사용하고 있습니다. 안타깝게도 작은 화면에서 탐색 표시 줄을 활성화하면 여러 하위 항목이 확장됩니다. 상위 항목을 누르면 하위 항목이 확장/축소되지 않습니다.

작은 화면에서 twitter-bootstrap navbar 하위 항목을 축소/확장하려면 어떻게해야합니까? 이 동작을 담당하는 부트 스트랩 코드/파일은 무엇입니까?

몇 가지 CSS와 자바 스크립트를 알고 있지만이를 파악하는 데는 충분하지 않습니다.

감사합니다.

답변

0

Bootstrap Collapse JS이 필요합니다. 그런 다음 내비게이션 막대를 감싸는 <div class="nav-collapse collapse">이 필요합니다. 마지막으로 CSS 미디어 쿼리를 사용하여 작은 화면에만 나타나는 버튼에 data-toggle="collapse" 속성을 적용하십시오.

작업 예제는 this example의 소스 코드를 참조하십시오

관련 문제