Bootstrap 4 Navbar 항목을 축소 섹션 외부에 배치하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

Bootstrap 4 Navbar 항목을 축소 섹션 외부에 배치하는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-10-30 22:54:03

원래의

989명이 탐색했습니다.

How to Position Bootstrap 4 Navbar Items Outside the Collapse Section?

Bootstrap 4: 접힌 섹션 외부에 Navbar 항목 배치

Bootstrap 4의 navbar 탐색은 까다로울 수 있으며, 특히 특정 요소를 유지하는 경우 더욱 그렇습니다. 접을 수 있는 부분 외부. 많은 개발자는 축소 상태에 관계없이 특정 항목이 지속성을 유지하도록 하는 데 어려움을 겪습니다.

이 문제를 해결하기 위한 가장 간단한 접근 방식은 Flexbox 유틸리티 클래스를 활용하는 것입니다. 이렇게 하면 추가 CSS가 필요 없으며 navbar-collapse div 외부에 원하는 항목이 깔끔하게 유지됩니다.

다음은 제공된 코드 조각의 향상된 버전입니다.

<code class="html"><nav class="navbar fixed-top navbar-light navbar-expand-lg navbar-template">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="d-flex flex-row order-2 order-lg-3">
        <ul class="navbar-nav flex-row">
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-facebook"></span></a></li>
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-twitter"></span></a></li>
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-youtube"></span></a></li>
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-linkedin"></span></a></li>
        </ul>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Dropdown link</a>
                <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav></code>

로그인 후 복사

이 개선된 버전에서는 , 다음 변경 사항을 명확하게 관찰할 수 있습니다.

접기 외부에 유지하려는 항목은 navbar-collapse div 외부에 있습니다.
d-flex flex를 적용했습니다. - 영구 항목이 있는 컨테이너에 대한 행 클래스입니다. 이렇게 하면 해당 항목이 가로 행에 유지됩니다.
order-* 클래스가 사용됩니다. 이는 다양한 화면 중단점에 있을 때 플렉스 컨테이너 내에서 요소의 위치를 결정하는 반응형 순서 지정 유틸리티 클래스입니다.
order-2 order-lg-3 클래스는 영구 항목이 포함된 컨테이너에 적용되었습니다. 이렇게 하면 해당 항목이 모바일 뷰포트에서는 두 번째 순서로 유지되고 큰 화면에서는 세 번째 순서로 유지됩니다.
order-3 order-lg-2 클래스가 navbar-collapse div에 적용되어 다음을 보장합니다. 접을 수 있는 항목은 모바일에서 우선 순위를 가지며 더 큰 화면에서는 두 번째가 됩니다.

이러한 클래스를 효과적으로 활용하면 접힌 부분 외부의 항목이 계속 표시되고 중단점에 도달하면 접을 수 있는 섹션이 우선 적용됩니다.

위 내용은 Bootstrap 4 Navbar 항목을 축소 섹션 외부에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!