Question

我正在尝试使用bootstrap使我的菜单响应。

这是我当前的菜单，我试图让它崩溃，现在它只是消失，并没有显示图标（一个框中的3行）。关于我做错了什么的任何建议？好吧，我已经发现css不允许它出现，因为颜色是错误的。我把它弄成了白色现在它出现了。然而，这是一个小小的错误，它使菜单出现在底部旁边然后快速向下移动。我如何解决这个问题？

<div class="navbar-header">

<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a></div
<div class="width-navigation table-cell table-right navbar-collapse collapse">
                    <ul class="nav navbar-nav menu-main-menu">
                        <li class="menu item"><a href="#">home</a></li>
                        <li class="menu item"><a href="#">test1</a></li>
                        <li class="menu item"><a href="#">test2</a></li>
                        <li class="menu item"><a href="#">test3</a></li>         
                    </ul>         
</div>


@media (max-width: 991px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}
.navbar-toggle .icon-bar {
    background-color: white;
    border-color: white;

}

Answer 1

我猜你的导航栏结构是错误的。

查看以下文档：http://getbootstrap.com/components/#navbar

你正确地调用jQuery吗？

不要忘记： 1st：调用jquery.min.js 第二名：致电bootstrap.min.js

在您的代码之后调用脚本。

PS：我喜欢在标记之前调用这些文件。

折叠菜单引导定位严重

1 个答案: