在桌面視圖上刪除/禁用引導程序摺疊

我有一個包含兩個部分的頁面：日曆和信息。我想以不同的方式顯示它，具體取決於設備：正常的，如果我正在使用我的電腦，如果使用我的平板電腦/手機使用手風琴。在桌面視圖上刪除/禁用引導程序摺疊

這可能嗎？

這是當前的代碼。它已經設置了手風琴。

<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

在桌面視圖上刪除/禁用引導程序摺疊

回答

相關問題