Bootstrap汉堡菜单问题：自定义container-mini类移动端异常

这个问题大概率是因为你自定义的.container-mini没有完全继承Bootstrap默认.container的响应式布局规则，导致navbar的汉堡按钮定位或布局逻辑失效了。Bootstrap的navbar组件是和默认container的内边距、断点宽度紧密绑定的，直接替换成自定义类很容易踩坑，给你几个具体的修复方案：

1. 让container-mini完整实现Bootstrap container的响应式特性 #

默认的.container在不同屏幕断点下有对应的最大宽度和左右内边距，这些规则是navbar元素（比如汉堡按钮）正确布局的基础。你可以复制默认container的CSS规则，再调整成你需要的"mini"宽度：

/* 基础样式，确保移动端有正确的内边距 */
.container-mini {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* 不同断点的最大宽度，你可以把最后一个的max-width改成你想要的mini值 */
@media (min-width: 576px) {
  .container-mini {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container-mini {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container-mini {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container-mini {
    max-width: 900px; /* 这里替换成你想要的桌面端mini宽度 */
  }
}

重点是不要去掉左右15px的基础内边距，这是保证汉堡按钮不会贴到屏幕边缘或者和其他元素重叠的关键。

2. 调整汉堡按钮的移动端定位 #

如果你的container-mini已经有了基础内边距，但汉堡按钮还是错位，可能是.navbar-toggler-right的定位规则和你的容器不匹配。可以专门针对移动端调整这个按钮的位置：

@media (max-width: 767.98px) {
  .navbar-toggler-right {
    right: 15px; /* 和container-mini的内边距保持一致 */
  }
}

或者给container-mini的移动端右侧内边距加大一点，给按钮留出足够空间：

@media (max-width: 767.98px) {
  .container-mini {
    padding-right: 40px;
  }
}

3. 检查navbar的HTML结构是否正确 #

确保你的汉堡按钮是直接放在.container-mini内部，和.navbar-brand同级，没有额外的嵌套层级打乱布局。正确的结构应该是这样的：

<nav class="navbar navbar-toggleable-md navbar-light my-4" id="navna">
  <div class="container-mini">
    <!-- 品牌logo/文字 -->
    <a class="navbar-brand" href="#">你的品牌</a>
    <!-- 汉堡按钮 -->
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#site-nav" aria-controls="site-nav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- 折叠的导航菜单 -->
    <div class="collapse navbar-collapse" id="site-nav">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">首页</a>
        </li>
        <!-- 更多导航项 -->
      </ul>
    </div>
  </div>
</nav>

按照上面的步骤调整后，移动端的汉堡菜单应该就能正常工作了——核心就是让自定义容器对齐Bootstrap的响应式布局逻辑，不要破坏navbar组件的默认定位规则。

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