twitter-bootstrap Bootstrap 面板：在移动设备上折叠但在桌面上展开，如何？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35682494/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap panel: collapsed on mobile but expanded on desktop, how?
提问by Torbj?rn Loke Nornwen
How can I as simply as possible remove the class "in" from the div with id "panel-login" if the screen are smaller than 1199px (Bootstrap's xs, sm and md modes). I guess some kind of JS or JQuery could solve it but I'm not very good at either.
如果屏幕小于 1199px（Bootstrap 的 xs、sm 和 md 模式），我如何尽可能简单地从 id 为“panel-login”的 div 中删除类“in”。我想某种 JS 或 JQuery 可以解决它，但我不是很擅长。
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-xs-10">
<h4 class="panel-title">Login</h4>
</div>
<div class="col-xs-2 text-right">
<a data-toggle="collapse" href="#panel-login"><i class="fa fa-bars"></i></a>
</div>
</div>
</div>
<div id="panel-login" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
<li><a href="<?=$php_self?>?page=login&view=signup">Create account</a></li>
<li><a href="<?=$php_self?>?page=login&view=reset_password">Reset password</a></li>
<li><a href="<?=$php_self?>?page=login&view=reactivate_account">Reactivate account</a></li>
</ul>
</div><!-- end panel-body -->
</div>
</div><!-- end panel-default -->
采纳答案by Zim
You could use a CSS @media query to hide it.. overriding the effect if the .in
您可以使用 CSS @media 查询来隐藏它...覆盖效果，如果 .in
@media (max-width:1199px) {
#panel-login {
display:none;
}
}
CSS: http://codeply.com/go/Q4X15Bp31R
CSS：http: //codeply.com/go/Q4X15Bp31R
Or, you can use jQuery and watch the resize event like this..
或者，您可以使用 jQuery 并像这样观看调整大小事件。
function togglePanel (){
var w = $(window).width();
if (w <= 1199) {
$('#panel-login').removeClass('in');
} else {
$('#panel-login').addClass('in');
}
}
$(window).resize(function(){
togglePanel();
});
togglePanel();
jQuery: http://codeply.com/go/okQQKcdO7v
jQuery：http: //codeply.com/go/okQQKcdO7v
回答by createscape
This is what I used:
这是我使用的：
@media (min-width: 768px) {
#my-div .collapse {
display: block;
}
}
回答by Stefan Diabo
HTML
HTML
In you panel-heading element just add
在你的面板标题元素中添加
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-down"></i></span>
And in your panel-body element add "collapse":
并在您的面板主体元素中添加“折叠”：
<div class="panel-body collapse">
<div class="panel-body collapse">
JAVASCRIPT
爪哇脚本
$(document).on('click', '.panel-heading span.clickable', function(e){
var $this = $(this);
var d = $this.parents('.panel').find('.panel-body');
if(!d.hasClass('collapse in')) {
d.slideDown();
d.addClass('in');
$this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
else {
d.slideUp();
d.removeClass('in');
$this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}
})
Once you've added the javascript snippet globally you are able to toogle every panel by just adding the HTML snippet.
在全局添加 javascript 代码段后，您只需添加 HTML 代码段即可对每个面板进行切换。
To make it collapsed for mobile devices just trigger the collapse()function for mobile devices,like
要使其在移动设备上折叠，只需触发移动设备的collapse()功能，例如
if (($(window).width()) > 767) {
$('.collapse').collapse();
}
OR you could check if the hamburger menu is visible
或者您可以检查汉堡菜单是否可见
if (!$('.navbar-toggle').is(':visible')) {
$('.collapse').collapse();
}
回答by Enrico
Try this :
试试这个 ：
<head>
...
<script>
$(document).ready(function(){
if ($(window).width() <= 1200) {
$("#panel-login").removeClass("in");
}
});
</script>
</head>
回答by Rajesh Doot
Try This
试试这个
Put "in" class in html like class="collapse in"
将“in”类放入 html 中，例如 class="collapse in"
and use
并使用
if ( $( document ).width() < 768 ) {
$( '.collapse' ).removeClass( 'in' );
}
