Question

我正在使用引导类side-nav和nav-sidebar来创建侧面导航栏。但问题是当视点低于768px时，侧导航栏消失。

这是我的HTML代码：

<ul class="nav nav-sidebar side-nav">
        <li><a href="{{ path('new_message') }}" class="glyphicon glyphicon-file brl-sidebar-icon" data-toggle="tooltip" data-placement="right" title="New post"></a></li>
        <li><a href="{{ path('get_schedule') }}" class="glyphicon glyphicon-calendar brl-sidebar-icon" data-toggle="tooltip" data-placement="right" title="Schedule"></a></li>
        <li><a href="{{ path('get_task') }}" class="glyphicon glyphicon-saved brl-sidebar-icon" data-toggle="tooltip" data-placement="right" title="Tasks"></a></li>
</ul>

我尝试更改媒体css代码：最初，nav-sidebar css代码如下：@media (min-width: 768px)

我尝试将其更改为min-width：360px，但当视点低于768px时，它仍然会消失。

无论视点宽度如何，我该如何保持侧边栏？

提前致谢！

Answer 1

我不确定Bootstrap适用的具体规则是什么，但它可以应用其中一个引导类，这些类被分配用于隐藏CSS中的内容或者可以使用javascript添加它。如果你找不到它，你总是可以通过定义自己的CSS样式并将其指定为display来覆盖它：block！important;然后用一个带有！important标签的新媒体查询来覆盖它。只要CSS不是内联的，就应该胜过Bootstrap正在做的事情。

或者，如果您知道Bootstrap正在应用哪个类，您可以删除它$（'nav'）。removeClass（'hidden'）;

Answer 2

768px仍然大于320px，所以你必须要么

1）删除媒体查询（我会这样做）要么 2）制作它（最大宽度：320px）

bootstrap如何防止侧栏崩溃或在768px下观察时消失

2 个答案: