html - 在桌面 View 上删除/禁用引导折叠

Question

我有一个包含两个部分的页面:日历和信息。我想根据设备以不同的方式显示它:如果我使用我的电脑，则正常显示；如果我使用我的平板电脑/手机，则显示 Accordion 。

这可能吗？

这是当前代码。它已经有了 Accordion 组。

<div class="container">        
    <div class="panel-group" id="accordion">    
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Calendar</a>
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse in">        
                <div class="container col-md-4">                            
                    <div class="row">
                        <div class="col-md-12 col-sm-6">
                            <div id="calendar"></div>
                        </div>
                    </div>                                                               
                </div>                  
            </div>              
        </div>    
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Information</a>
                </h4>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <div class="container col-md-8">
                    <div id="alert_placeholder"></div>
                    <div class="panel panel-default">
                        <div id="panel" tabindex="1"></div>
                        <div class="panel-heading">                               
                        </div>
                        <div class="panel-body" id="info-panel">                          
                        </div>
                    </div>
                </div>               
            </div>
        </div>        
    </div>
</div>

Answer 1

我遇到了同样的问题。

我能够通过以下代码仅使用 CSS 来解决问题。

@media screen and (min-width: 1024px){
  .collapse {
      display: block;
      height: auto !important;
      visibility: visible;
    }
    .collapsing{
      position: relative;
      height: unset !important;
      overflow: hidden;
    }
}

希望对别人有帮助。 :)