Bootstrap 4 Navbar 항목을 접힌 컨테이너 외부에 표시하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

Bootstrap 4 Navbar 항목을 접힌 컨테이너 외부에 표시하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-10-28 09:38:02

원래의

292명이 탐색했습니다.

How to Keep Bootstrap 4 Navbar Items Visible Outside the Collapsed Container?

Bootstrap 4: 축소된 컨테이너 외부에 Navbar 항목 표시

Bootstrap을 사용할 때 일반적인 문제는 특정 navbar 항목을 축소된 컨테이너 외부에 지속적으로 표시하는 것입니다. 기본적으로 작은 화면에서 탐색 표시줄이 축소되면 모든 탐색 표시줄 항목이 숨겨집니다. 이 문제에 대한 간단한 해결책을 살펴보겠습니다.

접기 상태에 관계없이 탐색 모음 항목을 계속 표시하는 가장 간단한 방법은 Bootstrap에서 제공하는 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>

로그인 후 복사

설명

위 코드에서:

.d-flex .flex-row 클래스는 navbar 항목이 가로로 연속적으로 표시되도록 합니다. .
.order-2 .order-lg-3 클래스는 작은 화면에서 항목을 가장 오른쪽에 배치하고(order-2) 화면 크기가 커지면 항목을 왼쪽으로 이동합니다(order-lg- 3).
.order-3 .order-lg-2 클래스는 축소 버튼과 메뉴 항목을 작은 화면에서는 왼쪽(order-3)에 배치하고 화면 크기가 커질 때는 오른쪽(order-3)에 배치합니다. -lg-2).

Flexbox 유틸리티 클래스를 사용하면 navbar의 레이아웃을 우아하게 제어하여 navbar가 축소되어도 특정 항목이 계속 표시되도록 할 수 있습니다.

위 내용은 Bootstrap 4 Navbar 항목을 접힌 컨테이너 외부에 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!