如何仅将Bootstrap导航栏中的一个li元素移至右侧

核心思路 #

Bootstrap的navbar-nav是Flex容器，要实现部分菜单项左对齐、单个菜单项右对齐，需将右对齐的菜单项单独放在新的navbar-nav容器中，给这个容器添加ml-auto（Bootstrap 4版本）或ms-auto（Bootstrap 5版本）类，利用Flex布局的自动外边距特性将其推到右侧。

修改后的完整代码 #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <img src="images/circle_r.png" width="30" height="30" alt="">
    </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 active">
                <a class="nav-link" href="#">Home </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="tenant.html">Login/Sign-Up</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="proprietor.html">My Account</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="about.html">About</a>
            </li>
        </ul>
        <!-- 右侧Contact菜单项 -->
        <ul class="navbar-nav ml-auto"> <!-- Bootstrap 5 请替换为 ms-auto -->
            <li class="nav-item">
                <a class="nav-link" href="contact.html">Contact</a>
            </li>
        </ul>
    </div>
</nav>

之前方法无效的原因 #

• 给单个li加float-right：navbar-nav是Flex容器，float属性在Flex容器内不生效。
• 给整个ul加justify-content-end：会让所有菜单项右对齐，不符合需求。
• 给单个li加内边距：仅增加间距，无法精准推到右侧，且响应式场景下会失效。

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