在桌面视图上删除/禁用引导程序折叠

我有一个包含两个部分的页面：日历和信息。我想以不同的方式显示它，具体取决于设备：正常的，如果我正在使用我的电脑，如果使用我的平板电脑/手机使用手风琴。在桌面视图上删除/禁用引导程序折叠

这可能吗？

这是当前的代码。它已经设置了手风琴。

<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>

来源

2017-09-04 Zariweya

写不同块为

col-lg

等为

col-sm

，并用手风琴和其他你想要

来源

2017-09-04 10:40:53

什么都编写不同的代码，一个你可以为普通PC和y中的制表符/移动宽度添加媒体查询我们的样式表。随着宽度的缩小，媒体查询将触发，代码将按照设备宽度执行。

来源

2017-09-04 11:57:56

这不提供问题的答案。一旦你有足够的[声誉]（https://stackoverflow.com/help/whats-reputation），你将可以[对任何帖子发表评论]（https://stackoverflow.com/help/privileges/comment）;相反，[提供不需要提问者澄清的答案]（https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can- I-DO-代替）。 - [来自评论]（/ review/low-quality-posts/17229939） – Liam

虽然这可能是解决问题的有价值的提示，但一个好的答案也可以证明解决方案。请[编辑]提供示例代码来展示你的意思。或者，可以考虑将其写为注释。 –

您可以使用媒体查询。检查你不希望它出现的屏幕大小，并用一些CSS样式定位它们。样式标准的桌面，例如，你可以这样做：

@media (min-width:1281px) { 
    /* your css */ 
}

你可以使用这个CSS不显示collapse2 DIV例如：

@media (min-width:1281px) { 
    #collapse2{ 
    display: none; 
    } 
}

了解如何针对不同的设备here

来源

2017-09-04 16:49:47 Laiman

所以，我今天就在这里工作。对我来说，完整的解决方案需要一些额外的CSS，但基本上这是可以做到用一个小的jQuery：

// First you'll need to disable the default collapsible 
    // behavior on large screens: 

    $('a[data-toggle="collapse"]').click(function(e){ 
     if ($(window).width() >= 768) { 
     // Should prevent the collapsible and default anchor linking 
     // behavior for screen sizes equal or larger than 768px. 
     e.preventDefault(); 
     e.stopPropagation(); 
     }  
    }); 

    var $win; 

    // Function toggles bootstrap collapse based on window width. 
    function toggleCollapse($win) { 
     // Small screens 
     if ($win.width() < 768) { 
     $('.panel-collapse').collapse('hide'); 
     } 
     if ($win.width() >= 768) { 
      $('.panel-collapse').collapse('show'); 
     } 
    } 

    // Set collapsible appearance on window load; 
    toggleCollapse($(window)); 

    // Toggle collapsibles on resize. Optional if you want 
    // to be able to show/hide on window resize. 
    $(window).on('resize', function() { 
     var $win = $(this); 
     toggleCollapse($win); 
    });

我添加了一些额外的样式来修改我的元素的基础上他们是否在桌面上看到的外观，或移动。希望这有助于！

来源

2017-09-12 05:53:24 tnog

在桌面视图上删除/禁用引导程序折叠

回答

相关问题