Question

我想知道即使显示汉堡包（折叠状态）时，如何也保持菜单项显示在Bootstrap 4.5导航栏上？

有一个codeply示例，该示例使项目将自己添加到下拉菜单中，但这不是我想要实现的。与其在链接菜单上不使NavBar过载，不如在折叠菜单上显示导航栏中 featured 的菜单项，然后将其余部分放到折叠菜单时的通常状态。

Navbar collapsed still with two items shown，但我只想在那儿只买一件。当您单击“汉堡包”时，所有其他汉堡包均显示为其他正常的Bootstrap 4.5折叠菜单。

我的导航栏：

    <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
        <a href="#" class="navbar-brand" title="Home">
            <img alt="Home" src="images/logo.png" class="img-fluid" />
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a href="#" title="About" class="nav-link">About</a>
                </li>
                <li class="nav-item">
                    <a href="#" title="Contact" class="nav-link">Contact</a>
                </li>
                <li class="nav-item">
                    <a href="#" title="Privacy" class="nav-link">Privacy</a>
                </li>
                <li class="nav-item">
                    <a href="#" title="Terms" class="nav-link">Terms</a>
                </li>
            </ul>
        </div>
    </nav>

它是折叠时我希望保留在导航栏中的联系人项目，例如在小码示例中的FEATURED项目（忘记PRICING项目）。请忘记将其添加到下拉列表的JQuery部分。

感谢您的光临。

更新

自从原始答复以来，我已经对其进行了调整以适应我希望的情况，但是似乎很迟钝。有什么方法可以通过CSS或Bootstrap类来加快或改进它？

最新代码：

    <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
        <a href="/" class="navbar-brand" title="Home">
            <img src="images/logo.png" alt="Home" class="img-fluid" />
        </a>
        <div class="d-flex flex-row ml-auto d-inline-block">
            <ul class="navbar-nav mr-3">
                <li class="nav-item d-none d-sm-none bn">
                    <a href="#" title="Contact" class="nav-link">Contact</a>
                </li>
                <li class="nav-item d-block d-lg-none">
                    <a href="#" title="Contact" class="nav-link"><i class="fa fa-envelope-open" aria-hidden="true"></i></a>
                </li>
            </ul>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse flex-lg-grow-0 d-lg-none" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" title="About" class="nav-link">About</a>
                </li>
                <li class="nav-item d-none d-lg-block">
                    <a href="#" title="Contact" class="nav-link">Contact</a>
                </li>
                <li class="nav-item">
                    <a href="#" title="Privacy" class="nav-link">Privacy</a>
                </li>
                <li class="nav-item">
                    <a href="#" title="Terms" class="nav-link">Terms</a>
                </li>
            </ul>
        </div>
    </nav>

当我在折叠模式下为项目添加下划线时，当“汉堡”旁边显示“联系人”时，CSS删除下划线：

    .navbar-nav .bn {
    border-bottom: 0;
}

导航栏菜单项始终显示

0 个答案: