Vue-bootstrap导航栏实现logo居左、导航项居中、按钮居右错位问题咨询

解决方法 #

当前居中异常的核心原因是mx-auto仅在扣除左侧logo宽度后的剩余容器内计算居中位置，可通过调整布局层级和占位规则修复，修改后的完整代码如下：

<template>
  <div>
    <b-navbar toggleable="lg" type="dark" class='lx-navbar'>
      <!-- 左侧logo区域 固定占位 -->
      <b-navbar-brand href="#" class="nav-left-block">
        <img src='../assets/images/navbar.png' alt="Larkx Logo" height='35px;'>
      </b-navbar-brand>

      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
      <b-collapse id="nav-collapse" is-nav>
        <!-- 中间导航菜单项 全屏居中 -->
        <b-navbar-nav class="nav-center-block">
            <b-nav-item v-for="item in items" :key="item.id" :to='item.to'>{{ item.name }}</b-nav-item>
        </b-navbar-nav>

        <!-- 右侧Contact按钮区域 固定占位 -->
        <b-navbar-nav class="nav-right-block">
          <b-button class='lx-btn--1'> Contact </b-button>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </div>
</template>

<script>
  export default {
    name: 'Header',
    data() {
      return {
        items: [
          { id: 1, name: 'Home', to: '/' },
          { id: 2, name: 'GitHub', to: '/GitHub' },
          { id: 3, name: 'Socials', to: '/Socials' },
          { id: 4, name: 'Nova', to: '/Nova' }
        ]
      }
    }
  }
</script>

<style scoped>
.lx-navbar {
  background: transparent; 
  margin-top: .1vw;
}
/* 大屏下的布局逻辑 匹配toggleable="lg"的断点992px */
@media (min-width: 992px) {
  .lx-navbar {
    position: relative;
  }
  #nav-collapse {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
  }
  .nav-left-block, .nav-right-block {
    flex: 0 0 120px; /* 可调整该值匹配你的logo实际宽度，左右保持一致即可 */
  }
  .nav-center-block {
    margin: 0 auto;
  }
}

.nav-link {
  transition: all .15s ease-in-out;
}

.lx-btn--1 {
  background: none;
  color: #19c9a2;
  border: 2px solid #19c9a2;
  transition: .15s ease-in-out;
}

.lx-btn--1:hover {
  background: #19c9a2;
  color: black;
  border: 2px solid #19c9a2;
}
</style>

你可根据实际logo的宽度调整代码中flex: 0 0 120px的数值，只要左右两个侧边区块的占位宽度保持一致，中间导航菜单项就会完全基于全页面宽度居中，同时保留logo居左、Contact按钮居右的布局效果。该方案仅在大屏（≥992px）下生效，小屏会自动恢复默认折叠下拉菜单样式。

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