부트 스트랩 4에서 navbar 및 하위 탐색 모음 만들기

Question

부트 스트랩 v4를 사용 중이고 http://v4-alpha.getbootstrap.com/components/navbar/에 따라 고정식 탐색 표시 줄을 만들고 있습니다.

하지만 원하는 것은 navbar에 다른 줄을 만드는 것입니다. 그래서 실제로 서로 옆에 2 개의 navb를 원합니다.

단순히

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    // first line 
    </div> 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    // second line 
    </div> 
</nav> 

으로 일을 시도했지만 그것은 새로운 라인을하지 않습니다. 그냥 옆에 나란히 추가하려고합니다.

한 가지 방법은 서로 후에 두 개의 navbars를 만드는 것이지만 두 번째 줄을 첫 번째 줄과 똑같이 만들고 싶습니다.

Answer 1

위의 코드에는 세 가지 문제점이 있습니다. 첫째로, 첫 번째 <div>을 닫는 것을 놓쳤습니다. 그러면 아마도 네비게이션이 서로 옆에 앉아있는 것입니다. 둘째, 중복 된 ID navbarSupportedContent을 사용합니다. 셋째, 실제로는 내비게이션 막대를 전환 할 버튼이 없으므로 모바일 디스플레이에 전혀 표시되지 않습니다.

모바일에서 여러 navbars를 전환 할 수 있다는 문제를 해결하려면 navbar-collapse을 두 개의 navbar div가 포함 된 단일 상위 div로 사용해야합니다.

그래서, 당신은 실제로 아마 이런 식으로 뭔가를 찾고 :

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon">Toggle Navigation</span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <div> 
    // first line 
    </div> 
    <div> 
    // second line 
    </div> 
    </div> 
</nav> 

나는이 here을 보여주는 BootPly을 만들었습니다.

편집 : 기본적으로

는, 부트 스트랩 4 navbars에 대한 flex 사용하지만, 실제로는 기본적으로 필요한 flex-flow를 추가하지 않습니다. 당신은 추가하여이 문제를 해결할 수 있습니다 : 당신은 또한이 필요합니다

.navbar-collapse { 
    flex-flow: row wrap; 
} 

참고하여 행에 flex-direction을 추가하고, 그들이 플렉스의 폭의 100 %를 차지해야한다고 지정할 수 있습니다. 나는이 here을 포함하는 새로운 BootPly을 만든

.flex-row { 
    flex-direction: row; 
    width: 100%; 
} 

: 나는 div의이의 클래스 flex-row (flex.scss의 기본 이름)를 부여했습니다.

희망이 도움이됩니다. :)