引导 - 收缩的菜单不工作

Question

我把代码，我们在这里建设一个仪表盘;这是一个免费的引导中心模板：

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> 

Answer 1

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

参考文档的位置>Bootstrap Navbar

/*! 
 
* 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; 
 
    } 
 
}

<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>