如何在Bootstrap中仅当Hamburger Menu显示时将品牌居中于Navbar

我刚好做过类似苹果官网的导航栏效果，针对你遇到的「仅在汉堡菜单状态下让品牌居中」的需求，用Bootstrap的媒体查询就能完美解决，具体方案如下：

核心思路 #

Bootstrap 3的导航栏默认在屏幕宽度≤767px时切换到汉堡菜单模式，我们只需要针对这个断点写CSS，修改品牌的对齐方式，同时保留汉堡按钮在左侧的布局。

修改后的完整CSS代码 #

把下面的代码替换或补充到你的style.css里：

/* 原有样式保留 */
.navbar-default { 
  background-color: #199fa0; 
}

.navbar-default .navbar-nav li a { 
  color: #fff 
}

.icon-bar { 
  background-color:#fff !important; 
}

.navbar-default .navbar-brand { 
  color: #fff; 
}

.navbar-toggle { 
  float: left; 
  margin-left: 14px; 
}

/* 新增移动端适配规则 */
@media (max-width: 767px) {
  /* 让导航头部占满整行，避免元素拥挤 */
  .navbar-header {
    width: 100%;
  }
  
  /* 取消品牌默认左浮动，设置居中对齐 */
  .navbar-default .navbar-brand {
    float: none;
    display: block;
    text-align: center;
  }
  
  /* 去掉汉堡按钮默认的右侧margin，优化布局 */
  .navbar-toggle {
    margin-right: 0;
  }
}

为什么这样有效？ #

• @media (max-width: 767px)精准匹配汉堡菜单出现的屏幕宽度，确保只在移动端生效，不会影响桌面端布局。
• 给.navbar-header设置width:100%，让它占据整行，这样汉堡按钮和品牌不会挤在同一行，布局更清晰。
• 取消.navbar-brand的float:left默认样式，改用text-align:center让品牌文字居中，display:block确保它占据整行宽度，实现完美居中效果。
• 调整汉堡按钮的margin-right:0，去掉Bootstrap默认的右侧边距，避免影响左侧按钮的布局美观。

这样修改后，桌面端品牌保持左对齐，移动端汉堡按钮在左侧、品牌居中显示，完全符合你想要的苹果官网Navbar效果。

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