Bootstrap+CSS导航布局实现：主导航居中、两个链接居右

根据你的需求，我们可以利用Bootstrap的原生flex布局类轻松实现这个效果，不需要太多自定义CSS。下面分Bootstrap 5和Bootstrap 4两种常见版本给出具体实现：

Bootstrap 5 实现代码 #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <!-- 可选：品牌/Logo -->
    <a class="navbar-brand" href="#">你的品牌</a>
    
    <!-- 移动端折叠按钮 -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#centerNav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- 居中的导航链接容器 -->
    <div class="collapse navbar-collapse justify-content-center" id="centerNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">产品</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">关于我们</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">联系</a>
        </li>
      </ul>
    </div>

    <!-- 右侧固定的两个元素（后续可替换为按钮/图标） -->
    <div class="d-flex gap-3">
      <a class="nav-link" href="#">登录</a>
      <a class="nav-link" href="#">购物车</a>
    </div>
  </div>
</nav>

核心逻辑： #

• justify-content-center 让中间折叠容器内的导航链接水平居中
• 右侧的d-flex容器会被Bootstrap的flex布局自动推到最右侧，因为中间的collapse容器默认是flex-grow: 1，会占据所有剩余空间
• gap-3 是Bootstrap 5的间距类，用来给右侧两个元素之间添加间距

Bootstrap 4 实现代码 #

如果你的项目用的是Bootstrap 4，只需要调整几个类名：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">你的品牌</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#centerNav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-center" id="centerNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">产品</a>
        </li>
      </ul>
    </div>

    <!-- Bootstrap 4用ml-auto代替自动间距 -->
    <div class="ml-auto">
      <a class="nav-link mr-3" href="#">登录</a>
      <a class="nav-link" href="#">购物车</a>
    </div>
  </div>
</nav>

替换为按钮/图标 #

后续要把右侧链接换成按钮或图标，直接修改右侧容器内的元素即可，比如：

<div class="d-flex gap-2">
  <button class="btn btn-outline-primary">登录</button>
  <!-- 用SVG图标示例 -->
  <button class="btn btn-outline-secondary">
    <svg width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
      <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
    </svg>
  </button>
</div>

小屏幕适配（可选） #

如果希望在移动端折叠菜单里，右侧元素也保持居中，可以加一点自定义CSS：

@media (max-width: 991px) {
  .navbar-collapse {
    text-align: center;
  }
  .navbar .d-flex {
    margin-top: 1rem;
    justify-content: center;
  }
}

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