如何调整Bootstrap导航栏元素位置：按钮居左、标题居右

要实现注册/登录按钮左对齐、网站标题右对齐的布局，只需对现有代码做以下几处修改：

修改要点 #

• 调整导航栏内元素顺序，将按钮容器移至标题前方
• 移除按钮列表的ms-auto类，让按钮组靠左显示
• 给网站标题添加ms-auto类，使其自动靠右对齐

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Edenthought </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" type="text/css" href="https://bootswatch.com/5/morph/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- 汉堡按钮保持在最前，保证响应式交互正常 -->
    <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>

    <!-- 按钮容器移至标题前，移除ms-auto类让按钮靠左 -->
    <div class="collapse navbar-collapse text-center" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="btn btn-primary navbar-btn" type="button"  href="{% url 'register' %}">Register</a>
            </li>
            &nbsp; &nbsp; &nbsp;
            <li class="nav-item">
                <a class="btn btn-primary navbar-btn" type="button"  href="{% url 'my-login' %}">Login</a>
            </li>
        </ul>
    </div>

    <!-- 添加ms-auto类让标题靠右 -->
    <a class="navbar-brand main-heading ms-auto"> 
        &nbsp; Edenthought 
    </a>
</nav>

<body>
    <br>
    <br>
    <div class="text-center">
        <h2> Edenthought.... A home for your thoughts. </h2>
        <br>
        <a class="btn btn-outline-primary" type="button"  href="{% url 'register' %}">Register</a>
    </div>
</body>

<script src=""></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"  crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous">
</script>
<script src="{% static 'js/app.js' %}"></script>
</html>

效果说明 #

修改后桌面端导航栏将呈现「注册按钮 → 登录按钮 → （空白区域） → 网站标题」的布局，完全匹配需求；响应式场景下，点击汉堡按钮仍能正常展开菜单，不影响移动端体验。

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