如何將 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. 您可以清楚地觀察到以下變化：
2. 您可以清楚地觀察到以下變化：
4. 您可以清楚地觀察到以下變化：
5. 您可以清楚地觀察到以下變化：

您可以清楚地觀察到以下變化：我們應用了 d-flex flex -row 類別指向持久性項目所在的容器。這可確保這些項目保持在水平行中。 使用 order-* 類別。這些是響應式排序公用程式類，用於確定處於不同螢幕斷點時元素在 Flex 容器內的位置。 order-2 order-lg-3 類別已套用於包含持久性項目的容器。這可確保這些項目在移動視窗中保持第二個順序，在較大螢幕上保持第三個順序。 order-3 order-lg-2 類別已應用於 navbar-collapse div，確保可折疊項目在行動裝置上優先，在較大螢幕上排名第二。 有效地利用這些類別可確保折疊以外的物品保持可見，而到達斷點時可折疊部分優先。

以上是如何將 Bootstrap 4 導覽列專案放置在折疊部分之外？的詳細內容。更多資訊請關注PHP中文網其他相關文章！