vue 调整顶栏导航栏长度

要调整 Vue 中顶栏导航栏（Navbar）的长度，可以使用以下方法：

1. 在 CSS 文件中设置 `max-width` 属性来限制导航栏的最大宽度，例如：

   .navbar {
     max-width: 1200px; /* 设置最大宽度为 1200 像素 */
     margin: 0 auto; /* 居中显示 */
   }

2. 使用 `flex` 布局来控制导航栏的长度，例如：

   .navbar {
     display: flex;
     justify-content: space-between; /* 将导航栏中的元素分散对齐 */
     align-items: center; /* 垂直居中 */
   }

   .navbar-brand {
     flex: 1; /* 让品牌区域占据剩余空间 */
   }

   .navbar-nav {
     flex: 2; /* 让菜单区域占据更多空间 */
   }

在这个例子中，我们使用了 `flex` 布局来控制导航栏中各个元素的宽度比例，其中品牌区域占据了 1/3 的空间，菜单区域占据了 2/3 的空间。

3. 如果你使用的是 Bootstrap，可以使用 Bootstrap 提供的 `container` 和 `container-fluid` 类来控制导航栏的宽度，例如：

   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <div class="container-fluid"> <!-- 使用 container-fluid 类来撑满整个屏幕 -->
       <a class="navbar-brand" href="#">Brand</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="navbar-nav">
           <li class="nav-item active">
             <a class="nav-link" href="#">Home</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">Features</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">Pricing</a>
           </li>
         </ul>
       </div>
     </div>
   </nav>

在这个例子中，我们使用了 Bootstrap 提供的 `container-fluid` 类来让导航栏占据整个屏幕的宽度。如果你想要限制导航栏的宽度，可以使用 `container` 类来指定一个固定的宽度。