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">
<h3 id="개-추가-행">2개 추가 행</h3>
<p>navbar에 두 개의 행을 추가하기 위해 navbar-collapse div의 flex-column 클래스를 사용합니다. 이렇게 하면 navbar-collapse div의 하위 요소가 수직으로 쌓이게 됩니다.</p>
<pre class="brush:php;toolbar:false"><div class="collapse navbar-collapse flex-column">
<h3 id="탐색-링크-추가">탐색 링크 추가</h3>
<p>이제 행이 두 개 있으므로 탐색 링크를 추가할 수 있습니다. 각 행에 하나씩 두 개의 ul 요소를 생성하겠습니다.</p>
<pre class="brush:php;toolbar:false"><div class="collapse navbar-collapse flex-column">
<h3 id="결과">결과</h3>
<p>다음은 두 행이 있는 결과 navbar입니다.</p>
<pre class="brush:php;toolbar:false"><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 flex-column"></div></nav>