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

Bootstrap 4에서 축소 외부에 Navbar 항목을 표시하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-10-27 19:09:01

원래의

508명이 탐색했습니다.

How to Keep Navbar Items Visible Outside the Collapse in Bootstrap 4?

Bootstrap 4에서 축소되지 않은 Navbar 항목

문제: Bootstrap 4에서 축소된 컨테이너 외부에 지속적인 navbar 링크를 유지하는 것은 계속되는 문제였습니다. . 사용자는 탐색 모음이 축소되어도 링크가 계속 표시되기를 원합니다.

해결책:

Flexbox 유틸리티 클래스를 사용하는 것이 이 문제를 해결하는 가장 간단한 방법입니다. 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>

로그인 후 복사

접힌 메뉴 항목이 접힌 메뉴 항목의 끝(order-3)에 남아 있는지 확인하기 위해 반응형 order-* 클래스 사용에 유의하세요. /모바일 중단점.

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