如何保持 Bootstrap 4 導覽列專案在折疊容器外部可見？

Bootstrap 4：在折疊容器外部顯示導覽列項目

使用 Bootstrap 時，常見的挑戰是在折疊容器外部持久顯示某些導覽列項目。預設情況下，當導覽列在較小的螢幕中折疊時，所有導覽列項目都會隱藏。讓我們探索解決此問題的簡單方法。

無論折疊狀態如何，保持導覽列專案可見的最簡單方法是利用 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 類別確保導覽列項目水準顯示在一行中.
• .order-2 . order-lg-3 類別將項目放置在較小螢幕的最右側(order-2)，並在螢幕尺寸增加時將它們移至左側(order-lg- 3).
• .order-3 .order-lg-2 類別將折疊按鈕和選單項目放在較小螢幕中的左側（order-3），當螢幕尺寸增大時將折疊按鈕和選單項目放在右側（order -3）。 -lg-2).

透過使用 Flexbox 公用程式類，我們可以優雅地控制導覽列的佈局，確保即使導覽列折疊時某些項目仍然可見。

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