如何将 Bootstrap 4 导航栏项目放置在折叠部分之外？

Bootstrap 4：将导航栏项目定位在折叠部分之外

导航 Bootstrap 4 的导航栏可能很棘手，尤其是在维护某些元素时在可折叠部分之外。许多开发人员都在努力确保特定项目无论折叠状态如何都保持持久性。

要解决这个问题，最简单的方法是利用 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>

在此改进版本中，您可以清楚地观察到以下变化：

1. 您希望保留在折叠之外的项目位于 navbar-collapse div 之外。
2. 我们应用了 d-flex flex -row 类指向持久性项目所在的容器。这可确保这些项目保持在水平行中。
3. 使用 order-* 类。这些是响应式排序实用程序类，用于确定处于不同屏幕断点时元素在 Flex 容器内的位置。
4. order-2 order-lg-3 类已应用于包含持久项的容器。这可确保这些项目在移动视口中保持第二个顺序，在较大屏幕上保持第三个顺序。
5. order-3 order-lg-2 类已应用于 navbar-collapse div，确保可折叠项目在移动设备上优先，在较大屏幕上排名第二。

有效地利用这些类可确保折叠之外的项目保持可见，而到达断点时可折叠部分优先。

以上是如何将 Bootstrap 4 导航栏项目放置在折叠部分之外？的详细内容。更多信息请关注PHP中文网其他相关文章！