Bootstrap - 折叠菜单不起作用

Question

I took code for a dashboard we're building here; it's a free bootstrap dashboard template:

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

We like it a lot as it's simple and displays the kind of layout we need. Here's what I've done to edit the above so far, to suit our needs:

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

If you resize your browser, so that you're reducing the width, with the original template, once it gets to (I assume) xs or sm size, the sidebar menu neatly hides and the 3line button in the top right displays. You can tell I'm new to bootstrap!

If you resize my version, once it gets to (I assume) xs or sm size, the sidbar menu displays instead of hides, like it should in original template.

IF it helps, I noticed that as I was editing from template to my version, when I started removing containers from original template, the menu stopped hiding when resizing browser window.

As we want to use this dashboard on mobile phones, it's important for me to understand how to make this menu hidden, as soon as you browse to it, from a mobile device... hope you can help, thanks.

<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

You are missing <div class="collapse navbar-collapse" ></div> which surrounds the ul class.

Refer to the docs here > 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>