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

Question

我需要始终保持侧边栏菜单默认隐藏，以便当用户单击切换按钮时它会显示折叠的菜单 (nav-sm)。

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

Answer 1

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

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/

Answer 2

您可以创建一个 nav.php 并在您的代码中放入 nav-sm 属性，然后在您的 indexwhatever.php...

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

How to always hide sidebar on load in Gentelella like in mobile mode?

html

sidebar

bootstrap-grid

gentelella