具有可折叠组件的响应式布局

时间：2014-10-14 12:05:29

标签： twitter-bootstrap laravel foreach responsive-design collapse

我正在使用laravel框架和bootstrap开发一个网站，我需要使用可折叠组件进行响应式布局！我需要一些帮助:)）

大屏幕尺寸：

点击第一张图片：

enter image description here 点击第二张图片：

enter image description here

小屏幕尺寸：

点击第一张图片：

enter image description here

点击第二张图片：

enter image description here

此刻我有大屏幕尺寸的问题：

enter image description here

代码：bootply 

<section class="container full-width">
    <div class="row" id="accordion">
        <div class="col-lg-4 col-xs-12 no-padding">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                  <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive"/>
            </a>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding cyan">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-xs-12 no-padding">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                  <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive"/>
            </a>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding cyan">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-xs-12 no-padding">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                  <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive"/>
            </a>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding cyan">
                ...
                </div>
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
            </div>
        </div>
    </div>
</section>

确定！如何拉伸可折叠组件？当我点击其他文件时，引导程序崩溃以关闭其他崩溃的方式是什么？

我希望我能够解释我的问题：）

感谢您的关注！

编辑：

enter image description here

解决：

bootply

foreach上的这种布局（每行3项）

<section class="container-fluid no-padding">
     <div class="row no-padding">
          <div id="accordion-lg">
               <div class="hidden-xs panel">
                    @foreach (array_chunk($collection, 3) as $row)
                         @foreach ($row as $item)
                         <a class="col-lg-4 no-padding" data-toggle="collapse" href="{{ '#collapse-lg'.$item->id }}" data-parent="#accordion-lg">
                              Collapse Toogle
                         </a>
                         @endforeach
                         @foreach ($row as $item)
                         <div id="{{ 'collapse-lg'.$item->id }}" class="collapse">
                              Collapse
                         </div>
                         @endforeach
                    @endforeach
               </div>
          </div>
          <div id="accordion-xs">
               <div class="hidden-lg panel">
               @foreach ($category->trips as $item)
                    <a class="col-xs-12 no-padding" data-toggle="collapse" href="{{ '#collapse-xs'.$item->id }}" data-parent="#accordion-xs">
                        Collapse Toogle
                    </a>
                    <div id="{{ 'collapse-xs'.$item->id }}" class="collapse">
                        Collapse
                    </div>
               @endforeach
               </div>
          </div>  
     </div>
</section>

寻求帮助来解决这个问题！

3 个答案:

答案 0 :(得分：2)

因此，遗憾的是，如果不重复内容，则无法在这些断点处执行此操作。从本质上讲，你将有两支手风琴，一支在lg上显示，另一支在xs上显示。

复制内容存在缺点（例如加载时间增加，维护费用增加，更改时间增加等）但如果您认为可以接受，我会在下面找到解决方案。

我继续并重构你的代码（同时试图维护你正在做的大部分事情 - 比如没有填充）并删除了许多不必要的额外引导类。这两支手风琴现在完全分开了;首先是lg，然后是xs。

代码可在此处找到：http://www.bootply.com/8sga1R1l0F

我还注意到您提供的原始代码中存在另一个问题。当您点击手风琴中的元素时，它不会隐藏任何正在显示的元素。这是由于此处讨论的“错误”：Bootstrap 3 Accordion button toggle "data-parent" not working

如果您有任何问题，请与我们联系。

为完整起见，完整代码如下：

HTML 

<section class="container-fluid no-padding">
    <div class="row no-padding">
        <div class="hidden-xs">
            <a class="col-lg-4 no-padding" data-toggle="collapse" href="#collapseBottom">
                <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
            </a>
            <a class="col-lg-4 no-padding" data-toggle="collapse" href="#collapseBottom">
                <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
            </a>
            <a class="col-lg-4 no-padding" data-toggle="collapse" href="#collapseBottom">
                <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
            </a>
            </div>
            <div id="collapseBottom" class="hidden-xs collapse in">
                <div class="col-lg-4 no-padding">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                </div>
                <div class="col-lg-4 no-padding cyan">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                </div>
                <div class="col-lg-4 no-padding">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                </div>
            </div>
        </div>
        <div id="xsAccordion">
            <div class="hidden-lg panel">
                <a class="col-xs-12 no-padding" data-toggle="collapse" href="#collapseOne" data-parent="#xsAccordion">
                    <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
                </a>
                <div id="collapseOne" class="collapse in">
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div class="cyan">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                </div>
            </div>
            <div class="hidden-lg panel">
                <a class="col-xs-12 no-padding" data-toggle="collapse" href="#collapseTwo" data-parent="#xsAccordion">
                    <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
                </a>
                <div id="collapseTwo" class="collapse">
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div class="cyan">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                </div>
            </div>
            <div class="hidden-lg panel">
                <a class="col-xs-12 no-padding" data-toggle="collapse" href="#collapseThree" data-parent="#xsAccordion">
                    <img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive">
                </a>
                <div id="collapseThree" class="collapse">
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div class="cyan">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                    <div>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                    </div>
                </div>
            </div>
       </div>
   </div>
</section>

CSS 

.no-padding {
    margin: 0 !important;
    padding: 0 !important;
}

.cyan { 
    color: #00b1ba;
}

答案 1 :(得分：0)

如果我正确理解你的问题，那么演示应该对你有用..检查一次。

http://www.bootply.com/cbtRf3xqaV 

<section class="container full-width">
    <div class="row" id="accordion">
        <div class="col-lg-4 col-xs-12 no-padding">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="left">
              <img src="test.jpg" style="height: 150px; width: 150px;">
            </a>
            <div id="collapseOne" class="panel-collapse collapse in left">
                <div class="col-lg-4 col-xs-12 no-padding clearfix">
                ...
                </div>
              <div class="clearfix"></div>
                <div class="col-lg-4 col-xs-12 no-padding cyan left">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
                </div><div class="clearfix"></div>
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-xs-12 no-padding">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
               <img src="test.jpg" style="height: 150px; width: 150px;">
            </a>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div>
              <div class="clearfix"></div>
                <div class="col-lg-4 col-xs-12 no-padding cyan">
                ...
                </div><div class="clearfix"></div>
                <div class="col-lg-4 col-xs-12 no-padding">
                ...
                </div><div class="clearfix"></div>
            </div>
        </div>
        <div class="col-lg-4 col-xs-12 no-padding">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="left">
                <img src="test.jpg" style="height: 150px; width: 150px;">
            </a>
            <div id="collapseThree" class="panel-collapse collapse left">
                <div class="col-lg-4 col-xs-12 no-padding">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                </div><div class="clearfix"></div>
                <div class="col-lg-4 col-xs-12 no-padding cyan">
                 the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </div><div class="clearfix"></div>
                <div class="col-lg-4 col-xs-12 no-padding">
                when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
                </div><div class="clearfix"></div>
            </div>
        </div>
    </div>
</section>

更新

更新演示：http://www.bootply.com/cbtRf3xqaV

你可以查一次..

答案 2 :(得分：0)

使用引导程序4，您可以使用顺序类更改元素的顺序。首先，排列元素以便要在移动设备上显示。

然后应用order-sm-*类来更改大于移动设备的设备上的顺序。

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <h2>Simple Collapsible</h2>
        <p>Click on the button to toggle between showing and hiding content.</p>
        <div>
            <div class="row d-flex flex-wrap">
                <button type="button" class="btn btn-info order-md-0 col col-md-4 col-sm-12" data-toggle="collapse"
                    data-target="#demo">Simple collapsible</button>
                <div id="demo" class="collapse order-md-3 col-md-4 col-sm-12">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
                <button type="button" class="btn btn-info order-md-1 col-md-4 col-sm-12" data-toggle="collapse"
                    data-target="#demo2">Simple collapsible</button>
                <div id="demo2" class="collapse order-md-4 col-md-4 col-sm-12">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
                <button type="button" class="btn btn-info order-md-2 col-md-4 col-sm-12" data-toggle="collapse"
                    data-target="#demo3">Simple collapsible</button>
                <div id="demo3" class="collapse order-md-5 col-md-4 col-sm-12">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
            </div>
        </div>
    </div>
</body>
</html>

屏幕截图

台式机 enter image description here 移动 enter image description here

桌面扩展 enter image description here

移动扩展 enter image description here

相关问题
最新问题