时间戳

首页 > 解决方案 > 如何像在移动模式下一样在 Gentelella 中始终隐藏加载侧边栏？

html - 如何像在移动模式下一样在 Gentelella 中始终隐藏加载侧边栏？

问题描述

我需要始终默认隐藏侧边栏菜单，以便当用户单击切换按钮时，它将显示折叠菜单（nav-sm）。

换句话说，我需要在所有设备中都具有与移动模式相同的行为。我尝试了很多，但没有任何进展！

标签： htmlsidebarbootstrap-gridgentelella

解决方案

不确定是否有人遇到此问题，但这是我发现的：

nav-sm、nav-md 和 nav-lg 类定义侧边栏的样式。现在，nav-md 是gentelella 的原始模式，它隐藏了小型设备的侧边栏。我使用@media 查询来做到这一点：

@media (max-width: 991px) {
    .nav-md .container.body .right_col,
    .nav-md .container.body .top_nav {
        width: 100%;
        margin: 0
    }
    .nav-md .container.body .col-md-3.left_col {
        display: none
    }
    .nav-md .container.body .right_col {
        width: 100%;
        padding-right: 0
    }
    .right_col {
        padding: 10px !important
    }
}

如果您在查询之外执行相同的操作，它将覆盖原始样式，并且侧边栏在任何设备中的工作方式都相同......这就是我想要的，尽管我确信这样做是一种相当丑陋的方式。如果有人看到这一点并对事情有更好的理解，我会很感激一些评论。

PS：这实际上给页面底部的蓝色背景带来了新问题。但那是另一回事了。

这很有用：https ://misc.laboradian.com/dashboard-sample/1/

推荐阅读