Yii2 Navbar品牌标签如何单独居右？其余导航项保留左侧

嘿，这个需求很容易搞定，我给你分享两种最常用的实现思路，看你是用原生CSS还是前端框架：

方法一：原生CSS（Flexbox实现） #

这是最灵活的方式，不依赖任何框架：

1. HTML结构 #

把品牌标签放在导航容器的最后，和左侧导航项分开布局：

<nav class="navbar">
  <!-- 左侧导航项 -->
  <ul class="nav-items">
    <li><a href="/home">首页</a></li>
    <li><a href="/products">产品</a></li>
    <li><a href="/about">关于我们</a></li>
  </ul>
  <!-- 右侧品牌标签 -->
  <div class="company-label">我的品牌</div>
</nav>

2. CSS样式 #

利用Flexbox的justify-content: space-between让左右元素自动两端对齐，同时保证垂直方向居中：

.navbar {
  display: flex;
  justify-content: space-between; /* 关键：实现左右元素分离 */
  align-items: center; /* 垂直居中对齐 */
  padding: 0 20px;
  background-color: #f8f9fa;
  height: 60px;
}

.nav-items {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px; /* 导航项之间的间距 */
}

.nav-items a {
  text-decoration: none;
  color: #333;
}

.company-label {
  font-weight: bold;
  font-size: 1.2rem;
  color: #007bff;
}

方法二：使用Bootstrap框架（如果你的项目基于Bootstrap） #

Bootstrap的Navbar自带对齐类，用me-auto（margin-end:auto）让左侧导航项自动占据左侧空间，品牌标签自然就会被挤到右侧：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <!-- 左侧导航项：me-auto 推到左侧 -->
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="/home">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/products">产品</a>
      </li>
    </ul>
    <!-- 右侧品牌标签 -->
    <span class="navbar-text">我的品牌</span>
  </div>
</nav>

如果是其他框架（比如React Router、Vue Router的导航组件），核心逻辑都是一致的：把品牌标签和其他导航项放在独立容器中，通过Flex布局的空间分配属性（或框架自带的对齐类）实现左右分离。

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