Question

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

这是我的布局：

  <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但没有定义其他设备类。

Twitter Bootstrap菜单栏响应问题

1 个答案: