Bootstrap 面板：在移动设备上折叠但在桌面上展开，如何？

Question

如果屏幕小于 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 -->

Answer 1

您可以使用 CSS @media 查询来隐藏它。如果.in

@media (max-width:1199px) {
    #panel-login {
        display:none;
    }
}

CSS： http: //codeply.com/go/Q4X15Bp31R

或者，您可以使用 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