html - bootstrap 如何防止视点低于 768px 时侧边栏折叠或消失

Question

我正在使用 Bootstrap 类 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 添加的 Bootstrap 类。如果你找不到它，你总是可以通过定义你自己的 CSS 样式并分配它来覆盖它 display:block!important;然后用一个新的媒体查询覆盖它，也带有 !important 标签。只要 CSS 不是内联的，它就应该胜过 Bootstrap 所做的一切。

或者，如果您知道 Bootstrap 正在应用什么类，您可以将其删除 $('nav').removeClass('hidden');