小屏幕下Bootstrap navbar-toggle按钮点击展开时左移的问题

嘿，我来帮你搞定这个小问题～你说的在小屏幕上点击navbar-toggler按钮展开菜单时，按钮会向左偏移，收起又回到居中，这事儿我碰到过好几次，大概率是你的导航栏容器用了mx-auto配合flex布局，当折叠菜单展开后，父容器的宽度计算或者flex排列方式变了，把原本居中的按钮给“挤歪”了。

下面给你几个靠谱的解决方案，你可以挨个试试：

方案1：给按钮套个固定宽度的容器（简单粗暴见效快） #

你可以给包裹navbar-toggler的容器加个固定宽度，让它不管菜单展不展开，宽度都不变，按钮自然就稳在中间了。

先加一段CSS：

@media (max-width: 576px) {
  .navbar .mx-auto.d-sm-flex.d-block.flex-sm-nowrap {
    width: 100%;
    justify-content: center;
  }
}

或者更稳妥一点，专门给按钮弄个父容器：

.custom-toggler-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

然后修改你的HTML，把按钮放进去：

<div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
  <div class="custom-toggler-wrapper">
    <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#toggle-items" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
  <div class="collapse navbar-collapse" id="toggle-items">
    <!-- 这里放你的菜单内容 -->
  </div>
</div>

方案2：调整flex布局的优先级 #

Bootstrap的navbar-collapse展开后会占空间，可能影响同一行的flex元素。咱们可以强制让按钮的容器始终占满宽度并居中，菜单展开后单独占一行，互不干扰：

.navbar .mx-auto {
  flex: 1;
  display: flex;
  justify-content: center;
}
.navbar-collapse {
  flex-basis: 100%;
}

这样设置后，按钮的容器会牢牢占住整个可用宽度，把按钮钉在中间，菜单展开后自动换行，不会碰按钮的位置。

方案3：用绝对定位把按钮“焊”在中间 #

如果上面两个方案都不好使，那咱们就用绝对定位，把按钮直接固定在导航栏的居中位置，完全脱离文档流，谁也影响不了它：

@media (max-width: 576px) {
  .navbar {
    position: relative;
  }
  .custom-toggler {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

不过这个方法要注意导航栏的高度，别让按钮和其他内容重叠了哈。

最后提个小建议，你可以先检查下导航栏的DOM结构，确保navbar-collapse是正确嵌套在导航栏容器里的，有时候结构错了也会导致这种奇怪的布局问题。

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