在 AdminLTE 3 中：如何不仅在 992px 宽度下隐藏 PushMenu 侧边栏？答案

【问题标题】：In AdminLTE3: How to hide PushMenu side bar not only under 992px width?在 AdminLTE 3 中：如何不仅在 992px 宽度下隐藏 PushMenu 侧边栏？
【发布时间】：2020-04-21 07:52:45
【问题描述】：

使用 AdminLTE 3.0.4，并且希望在屏幕分辨率低于 1366 像素宽度时隐藏（不仅折叠）PushMenu 侧栏。

在 992px 下，它会自动隐藏它，但我不清楚这是由 Bootstrap 还是由 AdminLTE css 或 js 完成的，以及将其配置为自动隐藏菜单的最简单方法是什么，好像它是一部手机，低于 1366 像素（而不是 992 像素）。

<div class="wrapper">
    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">

        <div class="brand-link">...</div>

        <div class="sidebar">
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <div class="image"><i class="nav-icon fas fa-user"></i></div>
                <div class="info">...</div>
            </div>

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                <li></li>
                </ul>
            </nav>
        </div>
     </aside>
</div>

谢谢

【问题讨论】：

标签： bootstrap-4 adminlte

【解决方案1】：

您的侧边栏由sidebar-mini 类管理，因此请找到JS 在992px 断点上切换sidebar-mini 并将其更改为1366px 断点。

【讨论】：

谢谢，但很遗憾，我找不到。首先，正如您在 HTML 代码中看到的那样，sidebar-mini 类没有明确提及。其次，在 adminlte.js 中，虽然有 PushMenu 功能，但它包含一个“autoCollapseSize”默认设置为 992，但这仅指 Collapse（并且可以通过参数设置，所以这不是问题） - 它没有不要指隐藏/关闭。我在 AdminLTE CSS 中也没有找到该移动断点。是否有可能由 Bootstrap 处理？如果是这样，我该如何更改该设置？
你不能使用引导程序，我在 adminlte.io/themes/v3/index.html 设置了一个断点，我发现如果我在 body 标签中添加 sidebar-mini 类，它会显示侧边栏，如果我删除它，它会崩溃
问题是，我不是要拼凑它，而是要关闭它，就像在移动设备中一样（低于 992 像素）。我现在查看了标记。在 1000 像素的 Collpase 视图和 992 像素及以下的隐藏视图之间，其类没有区别。在这两种情况下，它仍然是：class="sidebar-mini layout-fixed sidebar-closed sidebar-collapse"。我找不到它...
在 992px 侧边栏也可见，当你点击汉堡菜单时，在 992px 中，它只是删除侧边栏的宽度，当你达到 992px 时，它给侧边栏提供宽度
我不能给你看，但它在我的浏览器中 100% 工作，现在你需要在你的 JS 中找到它

【解决方案2】：

为了隐藏：

 $('[data-widget="pushmenu"]').PushMenu("collapse");

开场：

 $('[data-widget="pushmenu"]').PushMenu("expand");

然后切换：

 $('[data-widget="pushmenu"]').PushMenu("toggle");

你的问题的答案：

if (screen.width < 1366)
        $('[data-widget="pushmenu"]').PushMenu("collapse");

【讨论】：