Bootstrap5导航栏品牌居左链接居右适配小屏时右侧链接换行如何解决

• 原有导航栏布局不符合Bootstrap 5 标准navbar规范，flex适配规则设置错误：仅给容器加了d-sm-flex，在宽度小于576px的移动端下会恢复为块级布局，导致右侧功能链接被挤到下一行
• 没有给flex容器设置两端对齐属性，无法实现品牌居左、链接居右的排列效果
• 多余的flex-sm-row-reverse会导致右侧链接的展示顺序和代码书写顺序相反，不符合常规需求

核心调整点 #

1. 将包裹导航栏头部的容器类从d-sm-flex改为d-flex，全断点保持flex布局，避免移动端换行
2. 给该flex容器添加justify-content-between类，自动实现左右两端对齐
3. 调整navbar结构层级，移除多余的嵌套row、col容器，符合Bootstrap 5 navbar的标准结构
4. 若极小屏（<375px）下右侧链接文字过宽溢出，可将文字替换为对应图标，或给非核心链接添加d-none d-sm-block类隐藏，只保留核心操作入口即可

修改后完整代码 #

<html>
    <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light border border-danger">
                <div class="w-100 p-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center">
                            <button
                            class="navbar-toggler me-2"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#navbarSupportedContent"
                            aria-controls="navbarSupportedContent"
                            aria-expanded="false"
                            aria-label="Toggle navigation"
                            >
                                <span class="navbar-toggler-icon"></span>
                            </button>
                            <a class="navbar-brand" href="#">brand name</a>
                        </div>
                        <div class="d-flex">
                            <div class="p-2">Search</div>
                            <div class="p-2">cart</div>
                            <div class="p-2">Login</div>
                            <div class="p-2">Sign up</div>
                        </div> 
                    </div>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav flex-column">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#">NEW ITEMS</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">BRANDS</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">CURATED PIECES</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">TOP ITEMS</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">FEATURED</a>
                            </li>
                        </ul>
                    </div>  
                </div>              
            </nav>
        </div>
    </body>
</html>

内容的提问来源于stack exchange，提问作者Grim