Twitter bootstrap 3 导航栏下拉菜单使导航栏在单击时稍微向左移动

我有一个带下拉菜单的导航栏。当您选择下拉菜单上的任一链接时，菜单会稍微向左移动（+-10px）。您可以在移动视图中更好地看到它

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <!-- add navbar-fixed-top -->
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="navbar-brand" href=""> <img src="" alt=""> </a> </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav pull-right">
          <li><a href="default.html"><i class="fa fa-home" aria-hidden="true"></i> </a></li>
          <li> <a href="#about-section">about</a> </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">overview <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#" data-toggle="modal" data-target="#myModal3">cost breakdown</a></li>
              <li><a href="#" data-toggle="modal" data-target="#myModal4">project progress</a></li>
            </ul>
          </li>
          <li> <a href="photos.html">photos</a> </li>
          <li> <a href="faq.html">faq</a> </li>
          <li> <a href="news.html">news</a> </li>
          <li> <a href="">contact</a> </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!-- container-fluid -->
  </nav>

切换导航

---

发生移位是因为内容溢出导致了垂直滚动条。如果您添加以下内容，它将删除移位

#navbar {
  overflow-y:hidden;
}

---

问题是什么？是什么导致了移动？