如何将Bootstrap导航栏中Logout和用户名元素单独右移？

算力阿峰

2026-8-25

问题描述

希望仅将导航栏中的Logout和{{user.first_name}}元素移至右侧，Home和Add URL保留在左侧。尝试使用ms-auto及CSS的text-align:right均无效，现寻求解决方法。当前代码如下：

{% load static %}
<!doctype html>
<html>
  <link rel="stylesheet" type="text/css" href="{% static 'navbar/css/style.css' %}">

<nav class="navbar navbar-expand-lg  bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="{% url 'home' %}">Website Monitoring Portal</a>
      <button class="navbar-toggler" 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>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="{% url 'home' %}">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'add-url' %}">Add URL</a>
          </li>
          
          {% if user.is_authenticated %}
          <li class="nav-item ms-auto ">
            <a class="nav-link" href = "{% url 'logout' %}">Logout</a>
          </li>
          <h5 class="li-right" >
          <li class="nav-item"> Hello, {{user.first_name}} </li>
          </h5>
          {% else %}
          <li class="nav-item">
            <a class="nav-link" href = "{% url 'register' %}">Register</a>
          </li>
          <li >
            <a class="nav-link" href="{% url 'login' %}">Login</a>
          </li>
          {% endif %}
        </ul>
        <form class="d-flex" role="search" method="POST" action="{% url 'search-url' %}">
          {% csrf_token %}
          <input class="form-control me-2" type="search" placeholder="Search Url" aria-label="Search" name="searched">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>
  </html>

解决方法

核心问题是你把左右两侧的导航项放在了同一个navbar-nav容器里，Bootstrap的navbar-nav是flex布局，ms-auto需要作用在独立的flex容器上才能实现左右分隔。此外，代码中用<h5>包裹<li>的写法不符合HTML规范，需要修正。

具体调整方案：

将左、右两侧的导航项拆分为两个独立的navbar-nav列表
给右侧的navbar-nav添加ms-auto类，让它自动填充剩余空间并对齐到右侧
移除错误的<h5>标签，用nav-link类保持用户信息和其他导航项的样式一致

调整后的完整代码：

{% load static %}
<!doctype html>
<html>
  <link rel="stylesheet" type="text/css" href="{% static 'navbar/css/style.css' %}">

<nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="{% url 'home' %}">Website Monitoring Portal</a>
      <button class="navbar-toggler" 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>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <!-- 左侧导航列表 -->
        <ul class="navbar-nav mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="{% url 'home' %}">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'add-url' %}">Add URL</a>
          </li>
        </ul>

        {% if user.is_authenticated %}
        <!-- 右侧导航列表（已认证状态） -->
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link" href="{% url 'logout' %}">Logout</a>
          </li>
          <li class="nav-item">
            <span class="nav-link">Hello, {{user.first_name}}</span>
          </li>
        </ul>
        {% else %}
        <!-- 右侧导航列表（未认证状态） -->
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link" href="{% url 'register' %}">Register</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'login' %}">Login</a>
          </li>
        </ul>
        {% endif %}
        
        <!-- 搜索表单添加间距 -->
        <form class="d-flex ms-3" role="search" method="POST" action="{% url 'search-url' %}">
          {% csrf_token %}
          <input class="form-control me-2" type="search" placeholder="Search Url" aria-label="Search" name="searched">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>
  </html>

补充说明：

拆分后的两个navbar-nav会在flex布局下自动排列，ms-auto让右侧列表占据剩余空间，实现左右分隔
用户信息用<span class="nav-link">代替原有的<h5>包裹，既保持样式统一，又符合HTML结构规范
给搜索表单添加ms-3类，避免和右侧导航项过于拥挤

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