根据屏幕大小折叠 div 元素

Question

我只是想知道如何根据屏幕大小使用引导程序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 之后，div 不会关闭，就像手风琴的工作方式一样。您必须将 panel-group 和 panel 添加到 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，直到它们被单击。一旦屏幕比小设备大，按钮将通过引导响应类隐藏。然后 div 将恢复正常的行为。这样您就不必为移动设备和桌面设备创建两种不同的布局和内容。

JS 小提琴演示： JS Fiddle Link

Answer 3

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

Answer 4

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

我在我的场景中所做的是在桌面屏幕中使用 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 5

您可以在引导程序中使用响应式实用程序类，查看此页面以获取更多详细信息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 6

媒体查询是您的朋友。

在您的 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 7

现有的答案有点过时了。除了visible-[devicename]，您可以使用基于断点的响应类。所以，假设你想要一个盒子，#someid，在sm 及以上位置显示完整，并且可以通过xs 的切换按钮折叠：

引导 3

Docs link:

• 你用hidden-*隐藏东西，其中*是断点（xs，sm，md，lg）
• 您使用visible-*-** 显示内容，其中* 是断点，** 是CSS 显示值（inline、block、inline-block）。
• 您可以使用collapse-* 将内容设置为默认仅在某些断点处折叠

例如：

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

引导程序 4

Docs link:

• hidden-*-up 隐藏* 及以上的元素，例如hidden-md-up 隐藏md（中桌面）和lg（大）断点处的元素。
• hidden-*-down 与 * 和更小的相同 - hidden-md-down 会隐藏在所有东西上除了 lg 大小。
• 没有 visible-* 等价物，您只需确保不要以这些尺寸隐藏它。

例如（注意 V4 仍处于 alpha 阶段，并且在崩溃时似乎有一些变化，所以这可能会改变）：

<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 大小显示，可折叠框默认仅在xs 大小以上隐藏。

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>

我们只会在大屏幕上在屏幕上看到“PRODUCTS”，它会居中（文本中心）并且只占 2 列宽

Answer 9

我在使用 Angular 6 手风琴时遇到了类似的问题，手风琴内的数据表不可见。解决方案是将手风琴包装在一个宽度为 fit-content 样式的 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>