Bootstrap 响应式侧边栏调整大小为小屏幕 <800px 中的图标菜单

Question

背景

不幸的是，我对来自 PHP 世界的现代 CSS（媒体查询）没有太多经验。因此，我不确定如何从逻辑上解决我的 CSS 布局问题。

我正在尝试创建一个用户仪表板模板，并且一直在学习一些教程。该模板的要求如下：

1. 主要内容区域是引导响应的
2. 侧边栏可折叠成小图标菜单
3. 如果屏幕小于 800 像素，侧边栏菜单会自动显示
4. 侧边栏收起时（如果屏幕

到目前为止我拼凑的内容：

$(document).ready(function() {
        $('#sidebar-btn').click(function() {
            $('#sidebar-wrapper').toggleClass('visible');
            $('#wrapper').toggleClass('visible');
        });
    });

/* navbar */
.navbar {
    margin-left:50px;
}

/* main content */
#page-content-wrapper {
    width:100%;
    position:absolute;
    padding:15px;
    padding-top:50px;
}

/* sidebar minimized */
#sidebar-wrapper {
    background:#444444;
    display:block;
    position:fixed;
    height:100%;
    z-index:1;
}
#sidebar-wrapper ul {
    margin:0px;
    padding:0px;
}
#sidebar-wrapper ul li {
    list-style:none;
}
#sidebar-wrapper ul li i {
    font-size:24px;
}
#sidebar-wrapper ul li span:nth-child(2) {
    display:none;
}
#sidebar-wrapper ul li a {
    display:block;
    padding:12px 12px;
    width:50px;
    color:#eeeeee;
    background:#222222;
    border-bottom:1px solid #444444;
}
#sidebar-wrapper ul li a:hover {
    color: #aaaaaa;
    background-color: #444444;
    text-decoration:none;
}
#sidebar-header {
    height:50px;
    background:#444444;
}
#sidebar-header h3 {
    display:none;
}
#sidebar-btn {
    display:inline-block;
    vertical-align:middle;
    cursor:pointer;
    position:absolute;
    top:0px;
    right:0px;
}
#sidebar-btn i {
    font-size:18px;
    color:#ffffff;
    padding:16px;
}
/* set element styles to fit tablet and higher(desktop) */
@media screen and (min-width: 800px) {
    /* sidebar visible */
    #sidebar-wrapper.visible {
        left:0px;
    }
    #sidebar-wrapper.visible ul li span:nth-child(2) {
        display:inline-block;
    }
    #sidebar-wrapper.visible ul li i {
        color: #777777;
        font-size:14px;
        min-width: 20px;
        text-align: center;
    }
    #sidebar-wrapper.visible ul li a {
        background:#222222;
        color:#cccccc;
        border-bottom:1px solid #444444;
        display:block;
        width:200px;
        padding:15px;
        font-size:14px;
    }
    #sidebar-wrapper.visible ul li a:hover {
        background:#777777;
        color:#eeeeee;
    }
    #sidebar-wrapper.visible h3 {
        display:inline-block;
        margin:0px;
        color:#fff
    }
    #wrapper.visible #page-content-wrapper {
        padding-left:200px;
    }
    #wrapper.visible .navbar {
        margin-left:200px;
    }
}

<!-- Latest compiled and minified CSS -->

<script src="https://use.fontawesome.com/3c2244d372.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="visible">
    <!-- sidebar -->
    <div id="sidebar-wrapper" class="visible">
        <div id="sidebar-header">
            <h3></h3>
        </div>
        <ul class="sidebar-nav">
            <li><a href="#"><span><i class="fa fa-tachometer"></i></span><span>Dashboard</span></a></li>
            <li><a href="#"><span><i class="fa fa-calendar"></i></span><span>Schedule</span></a></li>
            <li><a href="#"><span><i class="fa fa-credit-card"></i></span><span>Orders</span></a></li>
            <li><a href="#"><span><i class="fa fa-cogs"></i></span><span>Settings</span></a></li>
            <li><a href="#"><span><i class="fa fa-life-ring"></i></span><span>Help</span></a></li>
        </ul>
        <div id="sidebar-btn">
            <i class="fa fa-bars" aria-hidden="true"></i>
        </div>
    </div>
    <!-- end sidebar -->

    <!-- main content -->
    <div id="page-content-wrapper">

        <nav class="navbar navbar-fixed-top navbar-inverse">
            <div class="container">
                <div id="navbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Signed in as</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="container-fluid">

            <div class="row">
        <div class="col-md-12">
            <h1>Test Page</h1>
            <br>
            <p>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </p>
        </div>
    </div>

        </div>
    </div>
</div>

问题

第四点有问题。到目前为止，如果我调整屏幕大小，侧边栏会弹出一个图标菜单，但是当屏幕处于小模式时，我无法再展开该菜单。如何覆盖 CSS 特性，以便在切换可见类时，即使屏幕很小，我也可以再次查看菜单。

Answer 1

在我看来，您没有正确的代码来在最大宽度为 800 像素的屏幕上显示#sidebar-wrapper。你声明了@media 规则：

@media screen and (min-width: 800px)

并将所有显示侧边栏的代码都嵌套在其中，所以在这种情况下，Jquery只有在屏幕大于800px时才会展开侧边栏。

尝试做同样的事情

@media (max-width: 800px)

但是，据我了解，在这种情况下不需要媒体查询，因为您希望在所有尺寸的屏幕上都有相同的可扩展侧边栏。

UPD
将您现有的 JS 代码更改为以下代码：

$(document).ready(function() {
 if (window.matchMedia('(max-width: 800px)').matches) {

   $('#sidebar-wrapper').removeClass('visible')
   $('#wrapper').removeClass('visible');

   $('#sidebar-btn').click(function() {

     $('#sidebar-wrapper').toggleClass('visible');
     $('#wrapper').toggleClass('visible');
   });  
 } else {
     $('#sidebar-btn').click(function() {

       $('#sidebar-wrapper').toggleClass('visible');
       $('#wrapper').toggleClass('visible');
     });  
   }
});

您还需要删除此行：

@media screen and (min-width: 800px) {

并且不要忘记删除末尾的大括号。