Question

我有一个包含两个部分的页面：日历和信息。我希望以不同的方式显示它，具体取决于设备：如果我正在使用我的电脑和手风琴，如果我正在使用我的平板电脑/手机，则显示正常。

这可能吗？

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

<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，但基本上这可以使用一点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);
    });

我添加了一些其他样式来修改元素的外观，具体取决于它们是在桌面上还是在移动设备上查看的。希望这有帮助！

Answer 2

为此编写不同的块为了

col-lg

和其他

col-sm

并用手风琴和其他任何你想要的东西写出不同的代码

Answer 3

您可以在样式表中为普通PC和标签/移动设备宽度添加媒体查询。随着宽度缩小，媒体查询将触发，代码将按设备宽度执行。

Answer 4

您可以使用媒体查询。检查您不希望它出现的屏幕尺寸，并使用一些CSS样式定位它们。例如，要设置标准桌面的样式，您可以执行以下操作：

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

您可以使用此css不显示 collapse2 div，例如：

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

了解如何定位不同的设备here

Answer 5

我遇到了同样的问题。

我只能使用下面的代码来解决CSS。

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

希望它可以帮助其他人。：）

Answer 6

我在 bootstrap-4 中使用了一小段 jquery 来实现类似的功能。希望它可以帮助某人！您可以随时参考 Bootstrap 网格表，根据需要更改尺寸。

$(window).resize(function() {
    if ($(window).width() <= 992)
    {
        $('#filter_btn').attr("data-toggle", "collapse");
        $('#filter_menu').collapse('hide');
    }
    else
    {
        $('#filter_btn').attr("data-toggle", "");
        $('#filter_menu').collapse('show');
    }
});

<a id="filter_btn" data-toggle="collapse" href="#filter_menu" role="button" aria-expanded="false" aria-controls="filter_menu">
  <h4>Switch</h4>
</a>
<div class="filter_sel collapse" id="filter_menu">
  Content Here
</div>

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

6 个答案: