수직으로 쌓인 메뉴가 있는 2행 부트스트랩 4 Navbar를 만드는 방법은 무엇입니까?

두 행으로 Bootstrap 4 Navbar 만들기

도전

Bootstrap 4에서 사용자는 종종 독특한 배열: 왼쪽에 눈에 띄는 브랜드/아이콘이 있고 오른쪽에 세로로 정렬된 두 개의 탐색 모음 탐색 메뉴가 있습니다. 목표는 두 메뉴가 아이콘 오른쪽의 별도 행을 차지하는 레이아웃을 달성하는 것입니다.

해결책: Flexbox 활용

메뉴를 수직으로 정렬하려면 flex-column flexbox를 활용할 수 있습니다. navbar-collapse div의 유틸리티 클래스입니다. 이는 div의 하위 요소에 대한 flex-direction: 열을 설정하여 수직으로 쌓이도록 합니다.

<div>

추가 고려 사항

향상된 사용자 정의 및 정렬을 위해 다음 팁을 고려하세요.

• 아이콘 크기 조정: 아이콘이 너무 크거나 작은 경우 글꼴 크기를 사용하세요.
• 메뉴 사이에 공간 만들기: 두 번째 탐색 메뉴에서 여백 상단을 사용하여 메뉴 사이에 수직 공간을 추가합니다.
• 정렬 메뉴 오른쪽: navbar-nav 클래스에서 margin-left:auto를 사용하여 메뉴 오른쪽에 정렬합니다. icon.

이러한 조정을 통해 원하는 대로 두 개의 수직으로 쌓인 메뉴가 있는 Bootstrap 4 탐색 모음을 만들 수 있습니다.

위 내용은 수직으로 쌓인 메뉴가 있는 2행 부트스트랩 4 Navbar를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!