Question

我有一个Bootstrap Navbar可以在桌面上正常工作但是当缩小到大约425px时，联系按钮也开始作为登录按钮工作，这是以前从未做过的。

我的代码就是这个

<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

你的第二个列表项（登录btn）超过第一个，所以你要触发第二个而不是第一个

添加以下内容：

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

Bootstrap Navbar按钮变得混乱

1 个答案: