Html 根据屏幕大小折叠 div 元素

Question

提问by Dawid van der Hoven

I was just wondering how, based on screen size, could you use bootstraps accordion, so for example lets say i have a div I want to display regularly on everything but when in mobile view I want it to collapse.

我只是想知道如何根据屏幕大小使用引导手风琴，例如，假设我有一个 div，我想在所有内容上定期显示，但在移动视图中时，我希望它折叠。

Any suggestions?

有什么建议？

Answer 1

采纳答案by Shail

You can make use of responsive utility classes in bootstrap check this page for more details http://twitter.github.com/bootstrap/scaffolding.html#responsive

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

Something Like

就像是

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

Jsfiddle demo

Jsfiddle 演示

Answer 2

回答by Michael Petito

Here is an example using Shail's suggested approach, but without duplicating layouts. The intended behavior is to have an element collapse at one of Bootstrap 3's responsive breakpoints (screen-md).

这是一个使用 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>

The markup is such that #filtersis collapsed except when the css media query applies and overrides the behavior of the collapseclass.

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

The button to expand #filtersonly becomes visible once the media query no longer applies.

#filters仅当媒体查询不再适用时，展开按钮才可见。

Answer 3

回答by bootstrap714

UPDATE: Before the divs would not close after another one was clicked like how the accordion works. You must add panel-group and panel to the HTML for it to work. HTML has been updated along with CSS

更新：在 div 不会像手风琴一样被点击后关闭。您必须将面板组和面板添加到 HTML 才能使其工作。HTML 已随 CSS 一起更新

A little late but I hope this is what you were looking for. I was trying to do the same thing and this is the solution I came up with. First I tried to think how the navbar collapses. I made a class called "div-collapse". Which acts like the navbar collapse and makes the div close and hidden depending where you put it in the css.(this example the div collapses on small devices)

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

The CSS:

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

}

The HTML:

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>

This will create three buttons for small devices and have the divs hidden until they are clicked. Once the screen is bigger then small devices the buttons will be hidden via bootstraps responsive classes. And then the divs will go back to acting like they normally do. This way you do not have to create two different layouts and content for mobile and desktop.

这将为小型设备创建三个按钮，并隐藏 div，直到单击它们。一旦屏幕比小设备更大，按钮将通过引导响应类隐藏。然后这些 div 将恢复正常运行。这样您就不必为移动设备和桌面设备创建两种不同的布局和内容。

JS Fiddle Demo: JS Fiddle Link

JS 小提琴演示： JS 小提琴链接

Answer 4

回答by Cody

There are built in classesin Bootstrap to help you with this. Try using .visible-phone, .visible-tablet, etc. in your divs.

Bootstrap 中有内置的类可以帮助您解决这个问题。尝试在您的 div 中使用.visible-phone,.visible-tablet等。

Answer 5

回答by evilscary

Media queries are your friend.

媒体查询是您的朋友。

In your CSS add something similar to (this is for an iPhone 3-4 + retina):

在您的 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*/
}

Inside the query you would then add css to collapse the accordion.

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

Answer 6

回答by user56reinstatemonica8

The existing answers are a bit out of date. Instead of visible-[devicename], you can use breakpoint-based responsive classes. So, let's say you want to have a box, #someid, shown in full at smand above, and collapsible with a toggle button at xsonly:

现有的答案有点过时了。visible-[devicename]您可以使用基于断点的响应类来代替。因此，假设您想要一个框 #someid，完整显示在 atsm和上方，并且可以使用切换按钮折叠xs：

Bootstrap 3

引导程序 3

Docs link:

文档链接：

You hide things with hidden-*where *is the breakpoint (xs, sm, md, lg)
You show things with visible-*-**where *is the breakpoint and **is the CSS display value (inline, block, inline-block).
You can set things to be collapsed by default only at certain breakpoints with collapse-*

你隐藏的东西hidden-*哪里*是断点（xs，sm，md，lg）
您可以使用断点visible-*-**在哪里*以及**CSS 显示值 ( inline, block, inline-block) 来显示内容。
您可以将事物设置为默认情况下仅在某些断点处折叠 collapse-*

For example:

例如：

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

Bootstrap 4

引导程序 4

Docs link:

文档链接：

hidden-*-uphides the element at *and above, for example, hidden-md-uphides the element at the md(medium desktop) and lg(large) breakpoints.
hidden-*-downis the same for *and smaller - hidden-md-downwould hide on everything exceptlgsize.
There are no visible-*equivalents, you just be sure not to hide it at those sizes.

hidden-*-up隐藏在*和上面的元素，例如，hidden-md-up隐藏在md（中桌面）和lg（大）断点处的元素。
hidden-*-down是相同的*和更小的 -hidden-md-down将隐藏在除lg大小之外的所有内容上。
没有visible-*等价物，您只是确保不要以这些尺寸隐藏它。

For example (note V4 is still in alpha and there seem to be some changes around collapse, so this might change):

例如（注意 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>

The button only shows at xssize, the collapsible box is only hidden by default above xssize.

该按钮仅以xs大小显示，可折叠框默认仅在大小上方隐藏xs。

Answer 7

回答by Ion Gorostizu

I know this has been marked as answered already, but maybe my answer will help somebody in the future.

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

What I'm doing in my scenario is to override bootstrap with event.stopPropagation()in desktop screens and make the collapsable box visible with media queries.

我在我的场景中所做的是在桌面屏幕中使用event.stopPropagation()覆盖引导程序，并使可折叠框通过媒体查询可见。

A silly example (Jsfiddle example):

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

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:

CSS：

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

Javascript:

Javascript：

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

Answer 8

回答by Yilmaz

In Bootstrap-4 things are much easier:

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

We will see "PRODUCTS" on the screen only in large screen and it will be centered(text-center) and will take up only 2 columns wide

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

Html 根据屏幕大小折叠 div 元素

提问by Dawid van der Hoven

采纳答案by Shail

回答by Michael Petito

回答by bootstrap714

回答by Cody

回答by evilscary

回答by user56reinstatemonica8

Bootstrap 3

引导程序 3

Bootstrap 4

引导程序 4

回答by Ion Gorostizu

回答by Yilmaz

相关推荐

最近更新

标签

Html 根据屏幕大小折叠 div 元素

提问by Dawid van der Hoven

采纳答案by Shail

回答by Michael Petito

回答by bootstrap714

回答by Cody

回答by evilscary

回答by user56reinstatemonica8

Bootstrap 3

引导程序 3

Bootstrap 4

引导程序 4

回答by Ion Gorostizu

回答by Yilmaz

相关推荐

Html 按钮的文本垂直对齐

Html 将 <IMG/> 放在带有 CSS 的 <DIV> 中

为什么 html title 属性和 twitter bootstrap data-original-title 互斥？

Html “此时元素 div 上不允许使用属性名称”

相关推荐

最近更新

标签