Question

我使用css bootstrap制作了导航栏，当设备可以包含整个导航栏时它可以正常工作，但是如果它可以显示按钮，当你点击它时菜单出现，我有一些问题菜单http://red-sec.net就是一个例子，如果你去那个网页并调整屏幕大小，你会看到按钮，点击它，看看会发生什么。这是我的导航栏的代码：

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <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="http://red-sec.net" class="navbar-brand logo"><span style="display:none;">Hidden Text</span></a>
      </div>
      <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="menuitem"><a href="http://red-sec.net">Home</a></li>
        <li class="menuitem"><a href="http://announcements.red-sec.net">Announcements</a></li>
        <li class="menuitem"><a href="http://forum.red-sec.net">Forum</a></li>
        <li class="menuitem"><a href="http://news.red-sec.net">News</a></li>
        <li class="menuitem"><a href="http://donate.red-sec.net">Donate</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="menuitem"><a href="http://red-sec.net/signup.php">Sign Up</a></li>
        <li class="menuitem"><a href="http://red-sec.net/Login.php">Log In</a></li>
      </ul>
    </div>
      </div>
  </nav>

如果您无法在此处查看，则会显示发生的情况 http://prntscr.com/e0klbu

这是徽标类的样式：

.logo{
    margin:0;
    padding:0;
    width:150px;
    margin-top:20px;
    padding:0;
    height:30px;
    margin-bottom:0;
    background:url('../redsec.png');
    background-size:100%;
    background-repeat:no-repeat;
}

Answer 1

style.css第27行

.nav元素的规则为

height: 70px !important;

删除它，将显示整个菜单。

单击按钮时，twitter bootstrap导航栏无法正确扩展

1 个答案: