Bootstrap 5导航栏用户图标固定右侧：解决菜单展开移位问题

我在Django项目中使用Bootstrap 5创建顶部粘性导航栏时遇到问题：小屏幕点击切换按钮展开菜单时，fa-user用户图标会随菜单移位。需求是让该图标固定在导航栏右侧，仅菜单进行展开和收起操作。

原始导航栏代码：

<nav class="navbar navbar-transparent fixed-top navbar-expand-lg">
    <div class="container-fluid d-flex justify-content-arround">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">
            <img class="imagotipe" src="{% static 'img/imagotipe-white-02.svg' %}"
                 alt="imagotipe">
        </a>
        <div class="collapse navbar-collapse text-center" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
                <a class="nav-link" href="#">Me</a>
                <a class="nav-link" href="#">About</a>
                <a class="nav-link" href="#">Contact</a>
            </div>
        </div>
        <div>
            <a href="#">
                <i class="fa-solid fa-user"></i>
            </a>
        </div>
    </div>
</nav>

问题现象：

• 错误状态：小屏幕下菜单展开/收起时，用户图标会被挤到下拉菜单区域，随菜单移位
• 期望效果：用户图标固定在导航栏最右侧，菜单展开时仅链接区域下拉，图标位置保持不变

解决方法 #

通过调整Bootstrap的布局工具类，让用户图标容器脱离折叠菜单的布局影响，始终固定在右侧。修改后的代码如下：

<nav class="navbar navbar-transparent fixed-top navbar-expand-lg">
    <div class="container-fluid d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
                    aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand ms-2" href="#">
                <img class="imagotipe" src="{% static 'img/imagotipe-white-02.svg' %}"
                     alt="imagotipe">
            </a>
        </div>
        <div class="collapse navbar-collapse text-center" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
                <a class="nav-link" href="#">Me</a>
                <a class="nav-link" href="#">About</a>
                <a class="nav-link" href="#">Contact</a>
            </div>
        </div>
        <div class="ms-auto">
            <a href="#">
                <i class="fa-solid fa-user"></i>
            </a>
        </div>
    </div>
</nav>

修改说明 #

1. 修正拼写错误：将justify-content-arround改为正确的justify-content-between，让导航栏内容左右两端对齐
2. 添加ms-auto类：给用户图标容器加上这个margin工具类，自动将容器推到父元素最右侧，不受折叠菜单布局变化影响
3. 重构左侧布局：把切换按钮和品牌logo放在同一个flex容器中，保证小屏幕下左侧元素布局紧凑
4. 添加align-items-center：确保导航栏内所有元素垂直居中，提升视觉一致性

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