时间戳

首页 > 解决方案 > 导航栏上的两个菜单

html - 导航栏上的两个菜单

问题描述

如何将两个菜单放在一个导航栏中？

我想要一个菜单​​在左边，另一个在右边，右边的菜单不应该折叠。

例子：

正常 https://i.imgur.com/Tzvtz2n.png

折叠 https://i.imgur.com/QfppIIQ.png

我尝试了下面的代码，但是当您调整屏幕大小时，所有菜单都在折叠。

<html>
<!-- Bootstrap CSS --> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous"> 
<!-- Bootstrap JS --> 
<script src="="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">GPT</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="
                    <?= $base_url?>/dashboard/index.php">Dashboard
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="
                    <?= $base_url?>/dashboard/offers.php">Offers
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="
                    <?= $base_url?>/dashboard/withdraw.php">Redeem
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="
                    <?= $base_url?>/dashboard/profile.php">Profile
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="
                    <?= $base_url?>/dashboard/logout.php">Logout
                </a>
            </li>
        </ul>
    </div>
    <div class="flex-row ml-md-auto d-none d-md-flex">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="
                    <?= $base_url?>/dashboard/index.php">Dashboard
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="
                    <?= $base_url?>/dashboard/offers.php">Offers
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="
                    <?= $base_url?>/dashboard/withdraw.php">Redeem
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="
                    <?= $base_url?>/dashboard/profile.php">Profile
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="
                    <?= $base_url?>/dashboard/logout.php">Logout
                </a>
            </li>
        </ul>
    </div>

标签： htmltwitter-bootstrapbootstrap-4

解决方案

测试一下：

替换这个：

<div class="flex-row ml-md-auto d-none d-md-flex">

和 ：

<div class="flex-row ml-md-auto d-md-flex">

推荐阅读