Question

我只是想知道，根据屏幕大小，你可以使用bootstraps accordion，所以举个例子我说我有一个div我想定期在所有东西上显示但是在移动视图中我希望它崩溃

有什么建议吗？

Answer 1

以下是使用Shail建议方法的示例，但没有重复布局。预期的行为是在Bootstrap 3的响应断点（screen-md）之一处折叠元素。

@media (min-width: @screen-md)
{
    #filters
    {
        display: block;
    }
}

<button type="button" 
        data-toggle="collapse" 
        data-target="#filters" 
        class="visible-xs visible-sm collapsed">Filter</button>

<div id="filters" class="collapse">...</div>

标记是这样的，#filters将被折叠，除非应用css媒体查询并覆盖collapse类的行为。

只有在媒体查询不再适用时，才会显示展开#filters的按钮。

Answer 2

更新：在点击另一个之后div不会关闭之前，就像手风琴的工作方式一样。您必须将面板组和面板添加到HTML才能使用。 HTML已与CSS一起更新

有点晚了，但我希望这就是你要找的东西。我试图做同样的事情，这是我提出的解决方案。首先，我试着想一想导航栏是如何崩溃的。我做了一个名为“div-collapse”的课程。其中的行为类似于导航栏崩溃并使div关闭并隐藏取决于您将其放在css中的位置。（此示例div在小型设备上折叠）

CSS：

#accordion .panel {
  border:none;
  -webkit-box-shadow:none; 
  box-shadow:none;
}

.div-collapse {
  border-top: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.div-collapse {
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
 .div-collapse.collapse {
   display: block !important;
   height: auto !important;
   overflow: visible !important;
 }

}

HTML：

<div class="container marketing">
        <hr class="featurette-divider">
        <h2>Heading for some content that you have</h2>
        <div class="row">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel">
            <div class="col-md-12 visible-xs">
                <p>
                    <button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
  #1 Example One
                    </button>
                </p>
            </div>
            <div id="collapse1" class="div-collapse collapse col-md-4">
                <h3>Header 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p>
            </div>
            </div>
            <div class="panel">
            <div class="col-md-12 visible-xs">
                <p>
                    <button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
  #2 Example Two
                    </button>
                </p>
            </div>
            <div id="collapse2"  class="div-collapse collapse col-md-4">
                <h3>Header 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p>
            </div>
            </div>
            <div class="panel">
            <div class="col-md-12 visible-xs">
                <p>
                    <button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
  #3 Example Three!
                    </button>
                </p>
            </div>
            <div id="collapse3" class="div-collapse collapse col-md-4">
                <h3>Header 3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p>
            </div>
            </div>
            </div>
        </div>

这将为小型设备创建三个按钮，并在单击它们之前隐藏div。一旦屏幕变大，那么小设备的按钮将通过bootstraps响应类隐藏。然后div会像往常一样回归表演。这样您就不必为移动和桌面创建两种不同的布局和内容。

JS小提琴演示： JS Fiddle Link

Answer 3

Bootstrap中有built in classes可以帮助您解决此问题。尝试在您的div中使用.visible-phone，.visible-tablet等。

Answer 4

您可以在bootstrap中使用自适应实用程序类检查此页面以获取更多详细信息http://twitter.github.com/bootstrap/scaffolding.html#responsive

喜欢的东西

  <div class="visible-phone">accordion</div> 
  <div class="visible-desktop">all data you want to display</div>

Jsfiddle demo

Answer 5

媒体查询是你的朋友。

在你的CSS中添加类似的内容（这适用于iPhone 3-4 +视网膜）：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {
    /*your css here*/
}

@media only screen and (max-device-width: 480px) and (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) {
    /*your css here*/
}

在查询中，您将添加css以折叠手风琴。

Answer 6

现有答案有点过时了。您可以使用基于断点的响应类，而不是visible-[devicename]。所以，让我们假设你想要一个#someid框，＃{1}}及以上，并且只有sm的切换按钮可以折叠：

Bootstrap 3

Docs link：

您隐藏xs的内容，其中hidden-*是断点（*，xs，sm，md）
您使用lg显示内容，其中visible-*-**是断点，*是CSS显示值（**，inline，block ）。
默认情况下，您只能在inline-block

例如：

collapse-*

Bootstrap 4

Docs link：

<button class="hidden visible-xs-block" data-toggle="collapse" data-target="#someid">Button label</button> <div id="someid" class="collapse-xs">Some content here</div>隐藏了hidden-*-up及以上的元素，例如*隐藏了hidden-md-up（中等桌面）和md（大）的元素）断点。

lg

hidden-*-down

*

hidden-md-down

上。
没有lg个等价物，你只需确保不要将它们隐藏起来。

例如（注意V4仍处于alpha状态，并且崩溃周围似乎有一些变化，因此可能会发生变化）：

visible-*

该按钮仅显示<button class="hidden-xs-down" data-toggle="collapse" data-target="#someid">Button label</button> <div id="someid" class="hidden-sm-up">Some content here</div>尺寸，可折叠框仅默认隐藏在xs尺寸以上。

Answer 7

我知道这已被标记为已回答，但也许我的回答将来会帮助某人。

我在我的方案中所做的是在桌面屏幕中使用event.stopPropagation()覆盖引导程序，并使用media queries显示可折叠框。

一个愚蠢的例子（Jsfiddle example）：

HTML：

<div class="data-div" data-toggle="collapse" data-target="#collapseData">
   <div class="row">
      <div class="col-xs-12">
         <b>Always visible data</b>
      </div>
   </div>
   <div class="row collapse" id="collapseData">
      <div class="col-xs-12">
         Mobile hidden data
      </div>
   </div>
</div>

CSS：

@media (min-width: 480px)
{
    #collapseData
    {
        display: block;
    }
}

使用Javascript：

var MOBILE_WIDTH = 480;
$( document ).ready(function() {
    if ($(window).width() >= MOBILE_WIDTH) {
        $('.data-div').click(function (event) {
            event.stopPropagation();
        });
    }
})

Answer 8

在Bootstrap-4中，事情要容易得多

<div className="container-fluid text-center d-none d-lg-block">
      <div className="row">
        <div className="mx-auto col-lg-2">
          <p className="text-uppercase">products</p>
        </div>
      </div>
    </div>

仅在大屏幕上，我们才会在屏幕上看到“产品”，并且该产品将居中（文本中心），并且仅占据2列宽

Answer 9

我在Angular 6手风琴上遇到了类似的问题，其中手风琴内部的数据表不可见。解决方案是将手风琴包裹在具有适合内容样式的div内，宽度如下所示

<div style="width:fit-content">
<ngb-accordion [activeIds]="activeAccordians">
  <ngb-panel id="id" title="SUMMARY">
    <ng-template ngbPanelContent>

      <table datatable [dtOptions]="dtOptions" class="row-border hover">
.....
</table
    </ng-template>
  </ngb-panel>
</ngb-accordion>
</div>

根据屏幕大小折叠div元素

9 个答案:

Bootstrap 3

Bootstrap 4