>웹 프론트엔드 >CSS 튜토리얼 >2줄 부트스트랩 4 Navbar를 만드는 방법은 무엇입니까?

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

Susan Sarandon
Susan Sarandon원래의
2024-12-14 02:27:14174검색

How to Create a Two-Row Bootstrap 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.