Bootstrap 5导航栏如何实现logo居左、菜单居中、搜索居右及移动端适配

核心思路是桌面端让中间导航脱离普通flex流实现相对屏幕居中，移动端单独重排布局顺序和对齐规则，不需要修改原有Django模板逻辑，仅调整导航结构和少量CSS即可。

1. 调整HTML导航结构 #

替换原有<nav>标签内的全部内容为以下代码，原有模板变量、主题色配置全部保留：

<nav class="navbar navbar-dark navbar-expand-md py-3 w-100" style="background-color:#FCC1C5">
  <div class="container-fluid position-relative">
    <!-- 左侧Logo：桌面端左对齐，移动端占满宽度居中 -->
    <a class="navbar-brand d-flex align-items-center mx-md-0 mx-auto" href="{% url 'home' %}">
      <span>Life With Vicky</span>
    </a>

    <!-- 移动端折叠按钮：移动端居中放在Logo下方，桌面端隐藏 -->
    <button class="navbar-toggler d-md-none mx-auto mt-2 border-0" data-bs-toggle="collapse" data-bs-target="#navcol-6">
      <span class="visually-hidden">Toggle navigation</span>
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- 右侧搜索框：桌面端固定在右侧，移动端移入折叠菜单 -->
    <form class="d-none d-md-flex ms-auto" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-light" type="submit">Search</button>
    </form>

    <!-- 折叠菜单容器：桌面端绝对定位全宽居中，移动端正常流展示 -->
    <div id="navcol-6" class="collapse navbar-collapse position-md-absolute w-100 start-0">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item">
          <a class="nav-link {% if active_tab == 'home' %}active{% endif %}" href="{% url 'home' %}">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link {% if active_tab == 'blog' %}active{% endif %}" href="{% url 'blog' %}">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link {% if active_tab == 'about' %}active{% endif %}" href="{% url 'about' %}">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link {% if active_tab == 'recommendations' %}active{% endif %}" href="{% url 'recommendations' %}">Recommendations</a>
        </li>
        <li class="nav-item">
          <a class="nav-link {% if active_tab == 'contact' %}active{% endif %}" href="{% url 'contact' %}">Contact</a>
        </li>
      </ul>
      <!-- 移动端专属搜索框，桌面端隐藏 -->
      <form class="d-flex d-md-none mt-3 px-2" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-light" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

2. 补充CSS样式 #

在main.css文件末尾追加以下代码，处理导航层级和移动端对齐问题：

/* 桌面端导航居中适配 */
@media (min-width: 768px) {
  .navbar .position-md-absolute {
    z-index: -1;
    pointer-events: none;
  }
  .navbar .position-md-absolute .nav-link {
    pointer-events: auto;
  }
}

/* 移动端导航文字居中 */
@media (max-width: 767.98px) {
  .navbar-nav {
    text-align: center;
  }
}

效果说明 #

• 桌面端：Logo固定在最左侧，中间导航通过绝对定位脱离普通flex布局流，实现相对整个屏幕宽度的水平居中，完全不受左侧Logo、右侧搜索框的宽度影响；搜索框固定在最右侧，层级设置保证所有元素点击交互正常。
• 移动端：Logo自动水平居中，折叠按钮放在Logo下方同样居中显示；展开折叠面板后，导航链接居中排列，搜索框放在菜单底部，完全符合需求。
• 原有自定义艺术字体、导航激活态判断、Django模板路由全部兼容，不需要额外修改。

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