如何在增加宽度时使边栏不显示？

Question

示例页面为http://blackrockdigital.github.io/startbootstrap-simple-sidebar/

当您第一次打开页面时，会有侧边栏和主要内容。

而当您减小浏览器的宽度时，侧边栏将消失，当您稍后增加宽度时，侧边栏将再次显示。这很好。

但是，如果你打开页面，然后点击'切换菜单'，首先关闭侧边栏。

然后，如果你减少浏览器的宽度，边栏将显示！如何让它不显示？

然后，如果您稍后增加宽度，侧边栏将会失望！如何使它仍然显示？

#wrapper { 
 
    padding-left: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled { 
 
    padding-left: 250px; 
 
} 
 

 
#sidebar-wrapper { 
 
    z-index: 1000; 
 
    position: fixed; 
 
    left: 250px; 
 
    width: 0; 
 
    height: 100%; 
 
    margin-left: -250px; 
 
    overflow-y: auto; 
 
    background: #000; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 250px; 
 
} 
 

 
#page-content-wrapper { 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 15px; 
 
} 
 

 
#wrapper.toggled #page-content-wrapper { 
 
    position: absolute; 
 
    margin-right: -250px; 
 
} 
 

 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 250px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.sidebar-nav li { 
 
    text-indent: 20px; 
 
    line-height: 40px; 
 
} 
 

 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #999999; 
 
} 
 

 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background: rgba(255,255,255,0.2); 
 
} 
 

 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 

 
.sidebar-nav > .sidebar-brand { 
 
    height: 65px; 
 
    font-size: 18px; 
 
    line-height: 60px; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a { 
 
    color: #999999; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a:hover { 
 
    color: #fff; 
 
    background: none; 
 
} 
 

 
@media(min-width:768px) { 
 
    #wrapper { 
 
     padding-left: 250px; 
 
    } 
 

 
    #wrapper.toggled { 
 
     padding-left: 0; 
 
    } 
 

 
    #sidebar-wrapper { 
 
     width: 250px; 
 
    } 
 

 
    #wrapper.toggled #sidebar-wrapper { 
 
     width: 0; 
 
    } 
 

 
    #page-content-wrapper { 
 
     padding: 20px; 
 
     position: relative; 
 
    } 
 

 
    #wrapper.toggled #page-content-wrapper { 
 
     position: relative; 
 
     margin-right: 0; 
 
    } 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="wrapper"> 
 

 
     <!-- Sidebar --> 
 
     <div id="sidebar-wrapper"> 
 
      <ul class="sidebar-nav"> 
 
       <li class="sidebar-brand"> 
 
        <a href="#"> 
 
         Start Bootstrap 
 
        </a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Dashboard</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Shortcuts</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Overview</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Events</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">About</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Services</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Contact</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     <!-- /#sidebar-wrapper --> 
 

 
     <!-- Page Content --> 
 
     <div id="page-content-wrapper"> 
 
      <div class="container-fluid"> 
 
       <div class="row"> 
 
        <div class="col-lg-12"> 
 
         <h1>Simple Sidebar</h1> 
 
         <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 
 
         <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> 
 
         <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <!-- /#page-content-wrapper --> 
 

 
    </div> 
 
    <!-- /#wrapper --> 
 

 
    <!-- jQuery --> 
 
    <script src="js/jquery.js"></script> 
 

 
    <!-- Bootstrap Core JavaScript --> 
 
    <script src="js/bootstrap.min.js"></script> 
 

 
    <!-- Menu Toggle Script --> 
 
    <script> 
 
    $("#menu-toggle").click(function(e) { 
 
     e.preventDefault(); 
 
     $("#wrapper").toggleClass("toggled"); 
 
    }); 
 
    </script>

Answer 1

JavaScript的波纹管应该做的伎俩：

$(window).resize(function() { 
     var viewportW = $(window).width(); 
     if(viewportW < 768) { 
     $('#wrapper').removeClass('toggled') 
     } 
    }); 

这保证了当视落在波纹管768

尽管 “切换” 类被删除在调整浏览器大小时看到这种效果非常好，请记住，用户永远不会真的这样做。在正常使用情况下，用户在特定的视口中打开UI并坚持使用它。

Answer 2

尝试这样的：

@media only screen and (max-width: 768px) { 
#sidebar-wrapper{ 
     display: none !important; 
}