부트 스트랩 수평 메뉴

Question

부트 스트랩 프레임 워크를 사용하여 WordPress 웹 사이트를 만들려고합니다. 수평 하위 메뉴를 만드는 방법이 있습니까? 나는 이미 Walker 클래스를 사용하여 드롭 다운을하고있다. 하지만 메뉴가 this

dropdown example image.

그리고 모바일 대응되는 모습 싶습니다.

감사합니다.

Answer 1

css에 익숙하다면 부트 스트랩 드롭 다운을 사용하고 CSS를 사용자 정의하여 부트 스트랩없이 메뉴를 만들 때처럼 드롭 다운을 100 % 너비로 만들 수 있습니다. 그 안에서 당신은 아마도 당신이 원한다면 응답 성을 유지하기 위해 부트 스트랩 그리드 시스템을 구현할 수 있습니다. 그러나 사용자가 모바일보기를 입력 할 때 어떤 일이 일어나는지 고려해야합니다 ... 메뉴를 수평으로 원할 때마다 미디어 쿼리가 필요합니다. 작은 화면에. 그리드 시스템이 도움이 될 것이지만 비슷한 일을했을 때 몇 가지 미디어 쿼리가 필요했습니다.

다른 대안은이 효과를 얻기 위해 jquery 플러그인을 찾거나 자바 스크립트를 배우기 시작하는 것입니다. 그러나 그들이 원하는 모든 일을하지 않는다면 아마도 부트 스트랩이있는 실제 드롭 다운 기능을 이미 가지고있는 것처럼 많은 이익을 얻지 못할 것입니다. 미안하지만 당신에게 명시적인 대답을주지는 못했지만 이것이 당신이 어떻게 해결할지를 알아내는 데 도움이 될 것입니다.

Answer 2

"display : -webkit-inline-box;"를 추가하면 ul 클래스 드롭 다운 메뉴에 당신이 원하는 것을 설명하는 방식으로 메뉴가 바뀌는 것을 볼 수 있습니다 - 위에서 말했던 것처럼 그렇게 할 필요가있는 것을 말하지 않고 - 그러나 그것은 단지 시간이 걸리며 만지작 거립니다.

브라우저에서 "요소 검사"를 사용하면 CSS 변경 사항을 빠르게 테스트 할 수 있습니다. 그것들이 어떻게 사물에 대해 확실하지 않으면 다음에 무엇을 할 것인지를 알아 낸다.

이 정보가 도움이되기를 바랍니다.

See Example