Bootstrap 4 - 折叠外的导航栏项目 [英] Bootstrap 4 - Navbar items outside the collapse

查看：35
本文介绍了Bootstrap 4 - 折叠外的导航栏项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

好的，所以我不得不承认，即使在 BS3 中，我也一直在努力使其正常工作.但我希望在折叠的容器之外有保持持久性的导航栏链接.

这就是我现在所拥有的:

<ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-facebook"></span></></li><li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-twitter"></span></></li><li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-youtube"></span></></li><li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-linkedin"></span></></li></nav>

这一直有效，直到第一个导航处于折叠状态.当折叠处于活动状态时，它看起来像这样:

有没有人为此找到一个干净的解决方案?

解决方案

最简单的方法是使用 flexbox 实用程序类，因此不需要额外的 CSS.将您始终想要显示的项目保留在 navbar-collapse div 之外.

https://www.codeply.com/go/TWZGiy3VGw

<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><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"><span class="navbar-toggler-icon"></span>

<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="#">首页</a></li><li class="nav-item"><a class="nav-link" href="#">功能</a></li><li class="nav-item"><a class="nav-link" href="#">定价</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">下拉链接</a><div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><a class="dropdown-item" href="#">这里还有别的东西</a>

</nav>

注意使用响应式 order-* 类来确保折叠菜单项在折叠/移动断点时保持最后 (order-3).

Ok so I have to admit this is something I have always struggled with getting to work correctly even in BS3. But I want to have navbar links outside of the collapsed container that stay persistent.

This is what I have right now:

<nav class="navbar fixed-top navbar-expand-lg navbar-template">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" 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>
    <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-facebook"></span></a></li>
        <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-twitter"></span></a></li>
        <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-youtube"></span></a></li>
        <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-linkedin"></span></a></li>
    </ul>
</nav>

This works until the first nav is in a collapsed state. When the collapse is active it looks like this:

Has anyone found a clean solution for this?

解决方案

The simplest way is using the flexbox utility classes, so no extra CSS is needed. Keep the items you always want to show out of the navbar-collapse div.

https://www.codeply.com/go/TWZGiy3VGw

<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>

Notice the use the responsive order-* classes to ensure the collapse menu items remain last (order-3) when in the collapsed/mobile breakpoint.

这篇关于Bootstrap 4 - 折叠外的导航栏项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆