Bootstrap 4를 사용하여 2행 Navbar를 어떻게 생성합니까?

두 행이 있는 Bootstrap 4 Navbar

이 Bootstrap 4 튜토리얼에서는 두 행이 있는 navbar를 만드는 방법을 보여 드리겠습니다. 이는 탐색 옵션이 많거나 다양한 탐색 유형을 분리하려는 웹사이트의 일반적인 디자인 패턴입니다.

전제 조건

따라가려면 다음이 필요합니다.

• HTML 및 CSS에 대한 기본 이해
• Bootstrap 4 설치 system

Navbar 생성

1. 새 HTML 파일을 생성하여 시작합니다.
2. 파일에 다음 코드를 추가하여 기본 navbar 구조를 생성합니다.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse">

2개 추가 행

navbar에 두 개의 행을 추가하기 위해 navbar-collapse div의 flex-column 클래스를 사용합니다. 이렇게 하면 navbar-collapse div의 하위 요소가 수직으로 쌓이게 됩니다.

<div class="collapse navbar-collapse flex-column">

탐색 링크 추가

이제 행이 두 개 있으므로 탐색 링크를 추가할 수 있습니다. 각 행에 하나씩 두 개의 ul 요소를 생성하겠습니다.

<div class="collapse navbar-collapse flex-column">

결과

다음은 두 행이 있는 결과 navbar입니다.

위 내용은 Bootstrap 4를 사용하여 2행 Navbar를 어떻게 생성합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!