2줄 부트스트랩 4 Navbar를 만드는 방법은 무엇입니까?

두 행으로 Bootstrap 4 Navbar 만들기

두 행으로 Bootstrap 4 Navbar를 설정하는 것은 간단하므로 다양한 배열이 가능합니다. 웹페이지. 이를 달성하려면 navbar-collapse div에서 flexbox 유틸리티 클래스 flex-column을 활용하여 하위 요소가 수직으로 정렬되도록 하세요.

1. flex-column 클래스를 추가하세요.

   세로 방향을 달성하려면 navbar-collapse div를 flex-column 클래스로 래핑하세요. 정렬.

   <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3">

2. 선택적 정렬 및 패딩:

   원하는 경우 추가 정렬 및 패딩을 추가하여 시각적 모양을 향상합니다. 예를 들어, 텍스트를 오른쪽 정렬하고 소셜 미디어 아이콘에 세로 패딩을 추가하려면:

   <ul class="navbar-nav flex-row mb-2">
       <li class="nav-item">
           <a class="nav-link py-1 pr-3" href="#">
               <i class="fa fa-facebook"></i>
           </a>
       </li>
       ...
   </ul>

3. 추가 변형:

   오른쪽에 두 행이 있는 탐색 모음이나 오른쪽 정렬 검색과 같은 대체 레이아웃을 실험해 보세요. form.

데모 및 코드:

다음은 두 개의 탐색 표시줄에 대한 데모 및 해당 코드입니다. 행:

• [데모](https://jsfiddle.net/lot99)
• [코드](https:// codepen.io/anon/pen/VEPqpe?editors=1010)
  

참고:

In Bootstrap 4.0.0 이상에서는 호환성을 위해 제공된 링크에 따라 업데이트된 코드를 사용해야 합니다.

위 내용은 2줄 부트스트랩 4 Navbar를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!