javascript - Bootstrap 导航栏按钮混淆

Question

我有一个在桌面上运行良好的 Bootstrap Navbar，但当缩小到大约 425 像素时，联系人按钮也开始用作登录按钮，这是以前从未做过的。

我的代码是这样的

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<ul class="nav navtop navbar-nav pull-right">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Contact Us <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="/business-advertising">Advertising</a></li>
      <li><a href="/council-contact">Contact the Council </a></li>
      <li><a href="/report-a-problem">Report a Problem</a></li> 
    </ul>
    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Login</h4>
          </div>
          <div class="modal-body">
          </div>
          <div class="modal-footer">
            <p class="modalfooter discoverthesecret">discover the secret...</p>
          </div>
        </div>
      </div>
    </div>

所以当我点击“联系我们”时，它会加载登录模式吗？

谢谢。

Answer 1

您的第二个列表项(登录按钮)超过第一个，因此您触发的是第二个而不是第一个

添加以下内容:

.nav>li {
    width: 50%;
    float: right;
}