我有这个代码:
<input value="+" class="btn btn_continents" type="button" data-toggle="collapse"
data-target="#collapseContinents" aria-expanded="false" aria-controls="collapseContinents" />
<div id="collapseContinents" class="collapse in" >
Content...
</div>
它工作正常,如果有人点击按钮内容显示和隐藏,但是当我希望屏幕尺寸较小时默认隐藏可折叠内容时出现问题
#collapseContinents{
//display: block;
.show();
@media screen and (max-width :@screen-xs-max) { .
//display:none;
.hidden();
}
}
当我添加 css(我用得更少)并且屏幕变小时,折叠插件不再起作用。我能做些什么?。谢谢。
最佳答案
如果你使用折叠插件,你不能用 less 来做,因为这个插件通过在 javascript 中添加一个 in
类来管理打开/关闭:
// From Boostrap CSS file:
.collapse {
display: none;
}
.collapse.in {
display: block;
}
因此在小屏幕上,插件和 CSS 之间会发生冲突。
你可以在 Javascript 中做到这一点:检测屏幕的大小并添加/删除 in
类:
// Add "in" class if window width > 1024px, remove it if <= 1024
$('#collapseContinents').toggleClass('in', $(window).width() > 1024);
关于css - 使用折叠插件在屏幕尺寸发生变化时使 div 可折叠 - Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40515271/