Question

我有一个带下拉列表的navBar。当您选择下拉菜单中的任一链接时，菜单会略微向左移动（+ - 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>

https://jsfiddle.net/art852/uyg1otg5/12/

Answer 1

由于内容溢出导致您有垂直滚动条，因此发生了移位。如果添加以下内容，则会删除班次。

#navbar {
  overflow-y:hidden;
}

https://jsfiddle.net/uyg1otg5/18/

导航栏下拉导致导航栏稍微向左移动

1 个答案: