【Bootstrap】Bootstrap v5 nav导航条实现部分居左，部分居右布局

一、效果

在同一行中，资产收集、信息探测等内容居左对齐，而测试与退出登录居右对齐。

二、修改后代码

   <!-- nav -->
    <nav class="navbar navbar-expand-sm bg-light navbar-light">

        <!-- div1 start -->
        <div class="collapse navbar-collapse justify-content-start">

            <!-- Brand -->
            <a class="navbar-brand" href="/">&nbsp;&nbsp;&nbsp;欢迎{{ request.session.username }}</a>

            <!-- navbar-nav -->
            <ul class="navbar-nav">
                <!-- Dropdown1 -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
                        资产探测
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'Bing_search' %}">Bing查询</a>
                        <a class="dropdown-item" href="{% url 'ip138_search' %}">ip138查询</a>
                        <a class="dropdown-item" href="{% url 'subdomain_search' %}">子域名爆破</a>
                        <a class="dropdown-item" href="{% url 'https_search' %}">HTTPS证书查询</a>
                        <a class="dropdown-item" href="{% url 'dns_search' %}">DNS查询</a>
                        <a class="dropdown-item" href="{% url 'site_search' %}">旁站扫描</a>
                        <a class="dropdown-item" href="{% url 'c_search' %}">C段扫描</a>
                        <a class="dropdown-item" href="{% url 'port_search' %}">端口扫描</a>
                    </div>
                </li>

                <!-- Dropdown2 -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
                        信息收集
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'cdn_search' %}">CDN查询</a>
                        <a class="dropdown-item" href="{% url 'whois_search' %}">WHOIS查询</a>
                        <a class="dropdown-item" href="{% url 'cms_bendi_search' %}">CMS指纹识别</a>
                        <a class="dropdown-item" href="{% url 'ip_search' %}">IP信息查询</a>
                        <a class="dropdown-item" href="{% url 'leak_search' %}">目录扫描</a>
                        <a class="dropdown-item" href="{% url 'waf_search' %}">WAF查询</a>
                        <a class="dropdown-item" href="{% url 'icp_search' %}">ICP备案查询</a>
                        <a class="dropdown-item" href="{% url 'webweight_search' %}">网站权重查询</a>
                    </div>
                </li>

                <!-- Links -->
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'vulnscan' %}">漏洞扫描</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'poc_search' %}">中间件检测</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'decode_view' %}">加解密</a>
                </li>

                <!-- Dropdown3 -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
                        信息管理
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'pageusers' %}">用户信息</a>
                        <a class="dropdown-item" href="{% url 'detect_history' %}">资产探测与信息收集搜索记录</a>
                        <a class="dropdown-item" href="{% url 'vuln_history' %}">漏洞扫描搜索记录</a>
                        <a class="dropdown-item" href="{% url 'poc_history' %}">POC检测搜索记录</a>
                    </div>
                </li>

            </ul>
        </div>

        <!-- div2 end -->
        <div class="collapse navbar-collapse justify-content-end">
            <ul class="navbar-nav">
                <li class="nav-item ">
                    <a class="nav-link" href="{% url 'test_view' %}">测试</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'logout_view' %}">退出登录</a>
                </li>
            </ul>
        </div>

    </nav>

三、分析

3.1 修改前效果

3.2 修改前代码

<nav class="navbar navbar-expand-sm bg-light navbar-light">

    <!-- Brand -->
    <a class="navbar-brand" href="/">&nbsp;&nbsp;&nbsp;欢迎{{ request.session.username }}</a>

    <ul class="navbar-nav">
        <!-- Dropdown -->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
                资产探测
            </a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="{% url 'Bing_search' %}">Bing查询</a>
                <a class="dropdown-item" href="{% url 'ip138_search' %}">ip138查询</a>
                <a class="dropdown-item" href="{% url 'subdomain_search' %}">子域名爆破</a>
                <a class="dropdown-item" href="{% url 'https_search' %}">HTTPS证书查询</a>
                <a class="dropdown-item" href="{% url 'dns_search' %}">DNS查询</a>
                <a class="dropdown-item" href="{% url 'site_search' %}">旁站扫描</a>
                <a class="dropdown-item" href="{% url 'c_search' %}">C段扫描</a>
                <a class="dropdown-item" href="{% url 'port_search' %}">端口扫描</a>
            </div>
        </li>

        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
                信息收集
            </a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="{% url 'cdn_search' %}">CDN查询</a>
                <a class="dropdown-item" href="{% url 'whois_search' %}">WHOIS查询</a>
                <a class="dropdown-item" href="{% url 'cms_bendi_search' %}">CMS指纹识别</a>
                <a class="dropdown-item" href="{% url 'ip_search' %}">IP信息查询</a>
                <a class="dropdown-item" href="{% url 'leak_search' %}">目录扫描</a>
                <a class="dropdown-item" href="{% url 'waf_search' %}">WAF查询</a>
                <a class="dropdown-item" href="{% url 'icp_search' %}">ICP备案查询</a>
                <a class="dropdown-item" href="{% url 'webweight_search' %}">网站权重查询</a>
            </div>
        </li>

        <!-- Links -->
        <li class="nav-item">
            <a class="nav-link" href="{% url 'vulnscan' %}">漏洞扫描</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{% url 'poc_search' %}">中间件检测</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{% url 'decode_view' %}">加解密</a>
        </li>

        <!-- Dropdown -->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
                信息管理
            </a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="{% url 'pageusers' %}">用户信息</a>
                <a class="dropdown-item" href="{% url 'detect_history' %}">资产探测与信息收集搜索记录</a>
                <a class="dropdown-item" href="{% url 'vuln_history' %}">漏洞扫描搜索记录</a>
                <a class="dropdown-item" href="{% url 'poc_history' %}">POC检测搜索记录</a>

            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{% url 'test_view' %}">测试</a>
        </li>


        <li class="nav-item">
            <a class="nav-link" href="{% url 'logout_view' %}">退出登录</a>
        </li>
    </ul>

</nav>

3.3 方法

将需要分开布局的两部分放入两个div标签中

居左：

<div class="collapse navbar-collapse justify-content-start"></div>

居中：

<div class="collapse navbar-collapse justify-content-center"></div>

居右：

<div class="collapse navbar-collapse justify-content-right"></div>

四、学习网址

菜鸟教程：https://www.runoob.com/bootstrap5/bootstrap5-navbar.html