Bootstrap - 折叠菜单无效

时间：2015-09-11 21:45:57

标签： javascript html css twitter-bootstrap

我为我们在这里建设的仪表板提供了代码;它是一个免费的bootstrap仪表板模板：

http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html

我们非常喜欢它，因为它很简单并且显示了我们需要的布局类型。以下是我迄今为止编辑上述内容以满足我们的需求：

http://tumolo.co.uk/smartcm/pages/index.html

如果您调整浏览器大小，以便使用原始模板缩小宽度，一旦达到（我假设）xs或sm尺寸，侧边栏菜单会整齐地隐藏，顶部的3行按钮正确显示。你可以告诉我新手自助！

如果你调整我的版本大小，一旦它（我假设）xs或sm大小，sidbar菜单显示而不是隐藏，就像在原始模板中一样。

如果它有帮助，我注意到当我从模板编辑到我的版本时，当我开始从原始模板中删除容器时，菜单在调整浏览器窗口大小时停止隐藏。

由于我们想在手机上使用此信息中心，因此了解如何通过移动设备浏览此菜单时，了解如何隐藏此菜单非常重要...希望您能提供帮助，谢谢。

<div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="sidebar-search">
                        <div class="input-group custom-search-form">
                            <input type="text" class="form-control" placeholder="Search...">
                            <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                        </div>
                        <!-- /input-group -->
                    </li>
                    <li>
                        <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Overview</a>
                    </li>
                    <li>
                        <a href="#.html"><i class="fa fa-external-link-square fa-fw"></i> Allocation</a>
                    </li>
                    <li>
                        <a href="#.html"><i class="fa fa-table fa-fw"></i> Events & Stages</a>
                    </li>
                    <li>
                        <a href="#.html"><i class="fa fa-comment fa-fw"></i>Correspondence Log</a>
                    </li> 
                    <li>
                        <a href="#.html"><i class="fa fa-folder-open fa-fw"></i>Resources</a>
                    </li>
                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>

1 个答案:

答案 0 :(得分：1)

您缺少围绕ul类的<div class="collapse navbar-collapse" ></div>。

请参阅此处的文档＆gt; Bootstrap Navbar

＆＃13;
＆＃13; 
/*!
 * Start Bootstrap - SB Admin 2 Bootstrap Admin Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
  background-color: #f8f8f8;
}
#wrapper {
  width: 100%;
}
#page-wrapper {
  padding: 0 15px;
  min-height: 568px;
  background-color: #fff;
}
@media(min-width:768px) {
  #page-wrapper {
    position: inherit;
    margin: 0 0 0 250px;
    padding: 0 30px;
    border-left: 1px solid #e7e7e7;
    background-color: #fff;
  }
}
.navbar-static-top {
  margin-right: 0;
  background-color: #fff;
}
.navbar-top-links {
  margin-right: 0;
  background-color: #fff;
}
.navbar-top-links li {
  display: inline-block;
}
.navbar-top-links li:last-child {
  margin-right: 15px;
}
.navbar-top-links li a {
  padding: 15px;
  min-height: 50px;
}
.navbar-top-links .dropdown-menu li {
  display: block;
}
.navbar-top-links .dropdown-menu li:last-child {
  margin-right: 0;
}
.navbar-top-links .dropdown-menu li a {
  padding: 3px 20px;
  min-height: 0;
}
.navbar-top-links .dropdown-menu li a div {
  white-space: normal;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
  width: 310px;
  min-width: 0;
}
.navbar-top-links .dropdown-messages {
  margin-left: 5px;
}
.navbar-top-links .dropdown-tasks {
  margin-left: -59px;
}
.navbar-top-links .dropdown-alerts {
  margin-left: -123px;
}
.navbar-top-links .dropdown-user {
  right: 0;
  left: auto;
}
.sidebar .sidebar-nav.navbar-collapse {
  padding-right: 0;
  padding-left: 0;
}
.sidebar .sidebar-search {
  padding: 15px;
}
.sidebar ul li {
  border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
  background-color: #eee;
}
.sidebar .arrow {
  float: right;
}
.sidebar .fa.arrow:before {
  content: "\f104";
}
.sidebar .active>a>.fa.arrow:before {
  content: "\f107";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
  border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
  padding-left: 37px;
}
.sidebar .nav-third-level li a {
  padding-left: 52px;
}
@media(min-width:768px) {
  .sidebar {
    z-index: 1;
    position: absolute;
    width: 250px;
    margin-top: 51px;
  }
  .navbar-top-links .dropdown-messages,
  .navbar-top-links .dropdown-tasks,
  .navbar-top-links .dropdown-alerts {
    margin-left: auto;
  }
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
    <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 class="navbar-brand" href="index.html">
        <img class="img-responsive" src="img/loginlogo.png">
      </a>

    </div>
    <!-- /.navbar-header -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-top-links navbar-right">
        <!-- /.dropdown -->
        <li class="dropdown pull-right">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-down"></i>
          </a>

          <ul class="dropdown-menu dropdown-user">
            <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>

            </li>
            <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>

            </li>
            <li class="divider"></li>
            <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>

            </li>
          </ul>
          <!-- /.dropdown-user -->
        </li>
        <!-- /.dropdown -->
      </ul>
      <!-- /.navbar-top-links -->
      <div class="navbar-default sidebar" role="navigation">
        <div class="sidebar-nav navbar-collapse">
          <ul class="nav" id="side-menu">
            <li class="sidebar-search">
              <div class="input-group custom-search-form">
                <input type="text" class="form-control" placeholder="Search..."> <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>

              </div>
              <!-- /input-group -->
            </li>
            <li> <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Overview</a>

            </li>
            <li> <a href="#.html"><i class="fa fa-external-link-square fa-fw"></i> Allocation</a>

            </li>
            <li> <a href="#.html"><i class="fa fa-table fa-fw"></i> Events & Stages</a>

            </li>
            <li> <a href="#.html"><i class="fa fa-comment fa-fw"></i>Correspondence Log</a>

            </li>
            <li> <a href="#.html"><i class="fa fa-folder-open fa-fw"></i>Resources</a>

            </li>
          </ul>
        </div>
      </div>
      <!-- /.sidebar-collapse -->
    </div>
    <!-- /.navbar-static-side -->
  </nav>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题