6

是否可以使用引导程序折叠侧边栏 div - 仅在手机上？我将如何做类似图像中的示例的事情？因此，在手机上，侧边栏会折叠并在单击时展开。我不明白媒体查询如何允许我这样做，因为涉及到 jquery。

http://i46.tinypic.com/2mzxflu.jpg

在这里看到了一些类似的问题，但没有完全像这样。有人可以解释或至少指出我正确的方向吗？提前致谢。

4

3 回答 3

5

我最终偶然发现了这个问题并为它添加了一个 CSS 类：

.collapse-non-md {
    height: 0;
    display: none;
}
.collapse-non-md.collapsing {
    display: block;
}

@media (min-width: 992px) {
    .collapse-non-md {
        height: auto;
        display: block;
    }
}

然后我设置了我想要在中等以下的屏幕上折叠的元素的类，collapse-non-md瞧，它在小型浏览器上折叠并在中等浏览器上打开。它仍然可以以正常方式打开和关闭（.in类覆盖.collapse-non-md）。

于 2015-04-02T21:02:02.103 回答
1

一种快速而肮脏的方法：为要在桌面屏幕上显示的全尺寸侧边栏编写代码，并为折叠的侧边栏单独标记以显示在移动设备上。

然后选择何时显示任一版本的侧边栏，使用引导程序提供的类来隐藏和显示基于媒体查询的内容。

折叠侧边栏：.hidden-desktop .hidden-tablet .visible-phone

完整的侧边栏：hidden-phone .visible-tablet .visible-desktop

于 2013-01-23T01:34:52.707 回答
0

我在使用 Bootstrap V3 时遇到了同样的问题。我按照官方文档上的教程进行操作，但无法让侧边栏在手机上默认折叠。

这来自 Bootstrap V3 源文件中的一个错误（2013/09/05 生成的自定义版本）。只需在原始 bootstrap.css 之后立即加载以下 CSS：

.collapse{display:none}.collapse.in{display:block}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;transition:height .35s ease}
@media screen and (min-width:768px){.nav-collapse.collapse{display:block!important;height:auto!important;overflow:visible!important}}

（这些样式来自原始 Bootstrap V3 源代码的早期版本）。

否则，我唯一的错误就是在我的 HTML 页面中初始化折叠插件。因此，如果您的 HTML 源代码中有这样的内容：

<script type="text/javascript">
    $(document).ready(function(){
        $('.collapse').collapse();
    });
</script>

...然后只需将其删除，折叠插件就会像魅力一样工作。

于 2013-09-06T07:16:16.870 回答