Bootstrap移动端导航切换按钮点击后位置右移问题求助

我来帮你搞定这个导航切换按钮点击偏移的问题～

首先得说，你遇到的核心问题出在自定义样式的写法和Bootstrap的布局逻辑冲突上，咱们一步步拆解：

问题根源分析 #

1. 选择器不匹配：你的CSS写的是header div.other-info .navbar-toggler，但给出的HTML里，<nav>并没有嵌套在header div.other-info结构里，这会导致样式要么没生效，要么后续和Bootstrap的默认折叠样式打架。
2. 百分比margin的坑：用margin-left:155%来定位按钮，这种百分比是基于父元素宽度计算的。当你点击按钮展开折叠菜单时，容器的宽度逻辑发生变化，百分比margin就会跟着“乱跑”，直接导致按钮偏移。

解决方案（两种可选） #

方案一：用Bootstrap内置类，简单又靠谱

Bootstrap本身提供了对齐工具类，完全不用自己写复杂的margin：

• 直接给按钮加ml-auto（Bootstrap 4）或ms-auto（Bootstrap 5）类，就能让按钮自动靠右对齐，而且不管折叠状态怎么变，位置都不会乱。

修改后的HTML代码：

<nav class="navbar navbar-expand-md navbar-light">
  <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Internet</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">TV</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Wireless</a>
      </li>
      <li class="nav-item">
        <a class="nav-link about" href="#">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">FAQ</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Blog</a>
      </li>
      <li class="nav-item">
        <a href="#" class="button">
          <button>GET A QUOTE</button>
        </a>
      </li>
    </ul>
  </div>
</nav>

然后删掉你原来写的那行自定义CSS就行，Bootstrap的类会帮你搞定一切。

方案二：自定义样式（不推荐，但如果必须用）

如果因为特殊布局需求一定要自己写样式，别用百分比margin，改用flex布局的自动对齐：

/* 先确保选择器匹配你的实际HTML结构，比如直接选中navbar里的按钮 */
.navbar .navbar-toggler {
  padding: 3px 6px;
  /* flex布局下，margin-left:auto会自动把元素推到最右边 */
  margin-left: auto;
}

这种写法不会受容器宽度变化影响，点击折叠按钮后位置也能保持稳定。

额外注意点 #

如果你用的是Bootstrap 5，记得把data-toggle改成data-bs-toggle，data-target改成data-bs-target，属性名变了，不改的话折叠功能可能失效，间接导致样式异常哦。

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