html - Twitter Bootstrap 菜单栏响应问题

Question

我正在尝试使用 twitter boostrap 制作一个菜单栏。不知何故，它不能作为响应式菜单工作。它显示 menubar okay with 1024 px 和小设备屏幕。但是从 788px 到 400px 没有响应。我在菜单栏旁边添加了一个 Logo 。当我将浏览器设置为 768px 时，菜单栏位于 logo 下方。其实是我的问题。

这是我的布局:

  <nav class="navbar navbar-default navbar-static-top span-nav" role="navigation">
     <div class="container">
          <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 href="/" class="navbar-brand span-navbar-brand"><img width="214px" height="50px" src="images/span_logo.png"></a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav ">
                      <li class="active"><a href="#">Home</a></li>
                      <li><a href="#">schedule classes</a></li>
                      <li><a href="#">PRICES</a></li>
                      <li><a href="#">Our teachers</a></li>
                      <li><a href="#">Blog</a></li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Learn More <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li class="divider"></li>
                          <li class="dropdown-header">Nav header</li>
                          <li><a href="#">Separated link</a></li>
                          <li><a href="#">One more separated link</a></li>
                        </ul>
                      </li>
                      <a href="#"><button type="button" class="btn btn-default navbar-btn login-btn">Log in</button></a>
                </ul>

          </div><!--/.nav-collapse -->

    </div></nav>

这是我的 CSS:

            .span-nav{
background-color: #000000;
border-color: #000000;
font-family: Arial;
font-size: 11px;
text-transform: uppercase;
  }

        .span-nav .navbar-nav > li >a {
color: #ffffff;
  }
      .span-nav .navbar-nav > li >a:hover{
color: #e24a30;
font-weight: bold;
 }
    .span-navbar-brand{
margin-left: -10px;
margin-top: -15px;
      }

     .span-nav .navbar-nav > .active > a,
      .span-nav .navbar-nav > .active > a:hover, 
        .span-nav .navbar-nav > .active > a:focus{
color: #e24a30;
font-weight: bold;
background-color: #000000;
  }

      .login-btn{
background-color: #000000;
border-color: #e24a30;
color: #e24a30;
text-transform: uppercase;
    } 

如何使导航菜单栏具有响应性？

Answer 1

我自己解决了。我的网格系统有问题，我声明了 col-xs-12 但没有定义其他设备类。