Bootstrap 4에서 2행 탐색 모음을 어떻게 만들 수 있나요?

2줄의 Bootstrap 4 navbar

Bootstrap 4에서는 Flexbox 유틸리티 클래스를 사용하여 2줄의 navbar를 생성할 수 있습니다. 이를 달성하는 방법은 다음과 같습니다.

1. flex-column 클래스를 .navbar-collapse div에 추가하세요. 이렇게 하면 두 개의 navbar가 수직으로 쌓이게 됩니다.

2. .navbar-brand 요소에 flex-direction:column 속성을 설정하세요. 이렇게 하면 로고가 navbar 링크와 수직으로 정렬됩니다.

3. 선택적으로 두 번째 navbar에 flex-row 클래스를 추가할 수 있습니다. 아이콘을 정렬하려면 수평.

업데이트된 코드 버전은 다음과 같습니다.

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <h1 class="py-2 ml-lg-2 mx-3"></h1>
</div></nav>

위 내용은 Bootstrap 4에서 2행 탐색 모음을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!