折叠容器

折叠容器

关注
发信
关注(28)粉丝(399)

Bootstrap网格与之间的折叠容器

本文介绍了Bootstrap网格与之间的折叠容器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我第一个问题，我希望你能帮助我。我正在尝试使用引导程序网格设置产品概述页面。对于大屏幕尺寸，我已经连续获得了4款产品。对于较小的屏幕尺寸，我希望每行有两个产品。



关键是，我希望将产品详细信息放在行之间的折叠容器中，打开时，当我点击一个产品。它适用于4种产品的大屏幕尺寸。但是，如何实现折叠后的容器恰好在行后出现，我在哪里点击了我的产品，而不管我每行有多少产品。在较小的尺寸下，折叠的容器在第二行后打开，即使我在第一行中单击了一个产品。



当我将每个折叠容器放在产品的后面当我打开它时，它会推开其他产品。



对不起，这有点复杂，我希望你知道我的意思。



为了更好地理解，我的笔在codepen上看了一下。



我想保持它尽可能简单，我不确定哪个方向走。





坦克到全部。



 
  body {margin-top：50px; overflow-y：scroll;}。img-responsive {width：100％;}。col-xs-6 {margin-bottom：20px;}。product-detail {width：100％;高度：300像素; background-size：cover; background-position：center center;}。no-padding-left {padding-left：0;}。product-collapse-wrap> div {margin-bottom：20px;}
< div类= 容器 > < div class =row> < div class =col-md-3 col-xs-6> < a class =collapse-btndata-toggle =collapsehref =＃Product-1aria-expanded =falsearia-controls =Product-1> < img class =img-responsivesrc =http://placehold.it/600x600> < / A> < / DIV> < div class =col-md-3 col-xs-6> < a class =collapse-btndata-toggle =collapsehref =＃Product-2aria-expanded =falsearia-controls =Product-2> < img class =img-responsivesrc =http://placehold.it/600x600> < / A> < / DIV> < div class =col-md-3 col-xs-6> < a class =collapse-btndata-toggle =collapsehref =＃Product-3aria-expanded =falsearia-controls =Product-3> < img class =img-responsivesrc =http://placehold.it/600x600> < / A> < / DIV> < div class =col-md-3 col-xs-6> < a class =collapse-btndata-toggle =collapsehref =＃Product-4aria-expanded =falsearia-controls =Product-4> < img class =img-responsivesrc =http://placehold.it/600x600> < / A> < / DIV> < / DIV> < div class =product-collapse-wrap> < div id =Product-1class =col-md-12 collapse> < div class =row> < div class =col-md-6 no-padding-left> < div class =img-responsive product-detailstyle =background-image：url（'http://placehold.it/800x600'）>< / div> < / DIV> < div class =col-md-6> < h3>产品1< / h3> < UL> <李>Flachheizkörper< /锂> <李>Planheizkörper< /锂> < / UL> < / DIV> < / DIV> < / DIV> < div id =Product-2class =col-md-12 collapse> < div class =row> < div class =col-md-6 no-padding-left> < div class =img-responsive product-detailstyle =background-image：url（'http://placehold.it/800x600'）>< / div> < / DIV> < div class =col-md-6> < h3>产品2< / h3> < UL> <李>Flachheizkörper< /锂> <李>Planheizkörper< /锂> < / UL> < / DIV> < / DIV> < / DIV> < div id =Product-3class =col-md-12 collapse> < div class =row> < div class =col-md-6 no-padding-left> < div class =img-responsive product-detailstyle =background-image：url（'http://placehold.it/800x600'）>< / div> < / DIV> < div class =col-md-6> < h3>产品3< / h3> < UL> <李>Flachheizkörper< /锂> <李>Planheizkörper< /锂> < / UL> < / DIV> < / DIV> < / DIV> < div id =Product-4class =col-md-12 collapse> < div class =row> < div class =col-md-6 no-padding-left> < div class =img-responsive product-detailstyle =background-image：url（'http://placehold.it/800x600'）>< / div> < / DIV> < div class =col-md-6> < h3>产品4< / h3> < UL> <李>Flachheizkörper< /锂> <李>Planheizkörper< /锂> < / UL> < / DIV> < / DIV> < / DIV> < div class =row> < div class =col-md-3 col-xs-6> < a class =collapse-btndata-toggle =collapsehref =＃Product-5aria-expanded =falsearia-controls =Product-5> < img class =img-responsivesrc =http://placehold.it/600x600> < / A> < / DIV> < div class =col-md-3 col-xs-6> < a class =collapse-btndata-toggle =collapsehref =＃Product-6aria-expanded =falsearia-controls =Product-6> < img class =img-responsivesrc =http://placehold.it/600x600> < / A> < / DIV> < div class =col-md-3 col-xs-6> < a class =collapse-btndata-toggle =collapsehref =＃Product-7aria-expanded =falsearia-controls =Product-7> < img class =img-responsivesrc =http://placehold.it/600x600> < / A> < / DIV> < div class =col-md-3 col-xs-6> < a class =collapse-btndata-toggle =collapsehref =＃Product-8aria-expanded =falsearia-controls =Product-8> < img class =img-responsivesrc =http://placehold.it/600x600> < / A> < / DIV> < / DIV> < div class =product-collapse-wrap> < div id =Product-5class =col-md-12 collapse> < div class =row> < div class =col-md-6 no-padding-left> < div class =img-responsive product-detailstyle =background-image：url（'http://placehold.it/800x600'）>< / div> < / DIV> < div class =col-md-6> < h3>产品5< / h3> < UL> <李>Flachheizkörper< /锂> <李>Planheizkörper< /锂> < / UL> < / DIV> < / DIV> < / DIV> < div id =Product-6class =col-md-12 collapse> < div class =row> < div class =col-md-6 no-padding-left> < div class =img-responsive product-detailstyle =background-image：url（'http://placehold.it/800x600'）>< / div> < / DIV> < div class =col-md-6> < h3>产品6< / h3> < UL> <李>Flachheizkörper< /锂> <李>Planheizkörper< /锂> < / UL> < / DIV> < / DIV> < / DIV> < div id =Product-7class =col-md-12 collapse> < div class =row> < div class =col-md-6 no-padding-left> < div class =img-responsive product-detailstyle =background-image：url（'http://placehold.it/800x600'）>< / div> < / DIV> < div class =col-md-6> < h3>产品7< / h3> < UL> <李>Flachheizkörper< /锂> <李>Planheizkörper< /锂> < / UL> < / DIV> < / DIV> < / DIV> < div id =Product-8class =col-md-12 collapse> < div class =row> < div class =col-md-6 no-padding-left> < div class =img-responsive product-detailstyle =background-image：url（'http://placehold.it/800x600'）>< / div> < / DIV> < div class =col-md-6> < h3>产品8< / h3> < UL> <李>Flachheizkörper< /锂> <李>Planheizkörper< /锂> < / UL> < / DIV> < / DIV> < / DIV> < / div>

解决方案

一个而回，我在这里回答了类似的问题：基本上你必须把折叠低于合适的 col - * 以满足您最小的布局。因此，在您的情况下： 

 < div class =row> 
< div class =col-md-3 col-xs-6> 
< a href =＃onedata-toggle =collapse>< img src =// placehold.it/600\">< ;; a> 
< / div> 
< div class =col-md-3 col-xs-6> 
< a href =＃twodata-toggle =collapse>< img src =// placehold.it/600\"> ;</a> 
< / div> 
< div class =col-xs-12 overlay collapseid =one> 
 1 
< / div> 
< div class =col-xs-12 overlay collapseid =two> 
 2 
< / div> 
< div class =col-md-3 col-xs-6> 
  
 
 
 
有关自举4，这种情况下是因为的 Flexbox的排序的更容易 .. 
 （alpha 6）
  
 
 （ Bootstrap 4.0.0 ）
 
It's my very first question here and i hope you can help me. I'm trying to set up a product-overview page with the bootstrap grid. I have got 4 products in a row for large screen sizes. For smaller screen sizes i'd like to have 2 products per row.



The trick is, i want to have the product details in a collapsed container between the rows, that opens up, when i click on a product. It's working for the large screen sizes with 4 products. But how to achieve that the collapsed container is showing up right after the row, where i clicked my product, independent of how many products i have got per row. On smaller sizes the collapsed container opens after the second row, even if i click a product in the first row.



When i place every collapsed container right behind the product in the markup it pushes away the other products when i open it up.



Sorry, it's a bit complicated, i hope you know what i mean.



For better understanding have a look on my pen on codepen.



I want to keep it as simple as possible and I'm not sure which way to go?



http://codepen.io/auftakt/pen/PWxJVX



Tanks to all.







$('.collapse-btn').on('click',function(){$('.collapse').collapse('hide');})
body {
  margin-top: 50px;
  overflow-y: scroll;
}

.img-responsive {
  width:100%;
}

.col-xs-6{
  margin-bottom: 20px;
}

.product-detail {
  width: 100%;
  height:300px;
  background-size: cover;
  background-position: center center;
}

.no-padding-left {
  padding-left: 0;
}

.product-collapse-wrap > div {
  margin-bottom: 20px;
}
<div class="container">
  <div class="row">
    <div class="col-md-3 col-xs-6">
      <a class="collapse-btn" data-toggle="collapse" href="#Product-1" aria-expanded="false" aria-controls="Product-1">
        <img class="img-responsive" src="http://placehold.it/600x600">
      </a>
    </div>
    <div class="col-md-3 col-xs-6">
      <a class="collapse-btn" data-toggle="collapse" href="#Product-2" aria-expanded="false" aria-controls="Product-2">
        <img class="img-responsive" src="http://placehold.it/600x600">
      </a>
    </div>
    <div class="col-md-3 col-xs-6">
      <a class="collapse-btn" data-toggle="collapse" href="#Product-3" aria-expanded="false" aria-controls="Product-3">
        <img class="img-responsive" src="http://placehold.it/600x600">
      </a>
    </div>
    <div class="col-md-3 col-xs-6">
      <a class="collapse-btn" data-toggle="collapse" href="#Product-4" aria-expanded="false" aria-controls="Product-4">
        <img class="img-responsive" src="http://placehold.it/600x600">
      </a>
    </div>
  </div>

  <div class="product-collapse-wrap">
    <div id="Product-1" class="col-md-12 collapse">
      <div class="row">
        <div class="col-md-6 no-padding-left">
          <div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"></div>
        </div>
        <div class="col-md-6">
          <h3>Product 1</h3>
          <ul>
            <li>Flachheizkörper</li>
            <li>Planheizkörper</li>
          </ul>
        </div>
      </div>
    </div>
    <div id="Product-2" class="col-md-12 collapse">
      <div class="row">
        <div class="col-md-6 no-padding-left">
          <div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"></div>
        </div>
        <div class="col-md-6">
          <h3>Product 2</h3>
          <ul>
            <li>Flachheizkörper</li>
            <li>Planheizkörper</li>
          </ul>
        </div>
      </div>
    </div>
    <div id="Product-3" class="col-md-12 collapse">
      <div class="row">
        <div class="col-md-6 no-padding-left">
          <div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"></div>
        </div>
        <div class="col-md-6">
          <h3>Product 3</h3>
          <ul>
            <li>Flachheizkörper</li>
            <li>Planheizkörper</li>
          </ul>
        </div>
      </div>
    </div>
    <div id="Product-4" class="col-md-12 collapse">
      <div class="row">
        <div class="col-md-6 no-padding-left">
          <div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"></div>
        </div>
        <div class="col-md-6">
          <h3>Product 4</h3>
          <ul>
            <li>Flachheizkörper</li>
            <li>Planheizkörper</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row">
    <div class="col-md-3 col-xs-6">
      <a class="collapse-btn" data-toggle="collapse" href="#Product-5" aria-expanded="false" aria-controls="Product-5">
        <img class="img-responsive" src="http://placehold.it/600x600">
      </a>
    </div>
    <div class="col-md-3 col-xs-6">
      <a class="collapse-btn" data-toggle="collapse" href="#Product-6" aria-expanded="false" aria-controls="Product-6">
        <img class="img-responsive" src="http://placehold.it/600x600">
      </a>
    </div>
    <div class="col-md-3 col-xs-6">
      <a class="collapse-btn" data-toggle="collapse" href="#Product-7" aria-expanded="false" aria-controls="Product-7">
        <img class="img-responsive" src="http://placehold.it/600x600">
      </a>
    </div>
    <div class="col-md-3 col-xs-6">
      <a class="collapse-btn" data-toggle="collapse" href="#Product-8" aria-expanded="false" aria-controls="Product-8">
        <img class="img-responsive" src="http://placehold.it/600x600">
      </a>
    </div>
  </div>

  <div class="product-collapse-wrap">
    <div id="Product-5" class="col-md-12 collapse">
      <div class="row">
        <div class="col-md-6 no-padding-left">
          <div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"></div>
        </div>
        <div class="col-md-6">
          <h3>Product 5</h3>
          <ul>
            <li>Flachheizkörper</li>
            <li>Planheizkörper</li>
          </ul>
        </div>
      </div>
    </div>
    <div id="Product-6" class="col-md-12 collapse">
      <div class="row">
        <div class="col-md-6 no-padding-left">
          <div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"></div>
        </div>
        <div class="col-md-6">
          <h3>Product 6</h3>
          <ul>
            <li>Flachheizkörper</li>
            <li>Planheizkörper</li>
          </ul>
        </div>
      </div>
    </div>
    <div id="Product-7" class="col-md-12 collapse">
      <div class="row">
        <div class="col-md-6 no-padding-left">
          <div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"></div>
        </div>
        <div class="col-md-6">
          <h3>Product 7</h3>
          <ul>
            <li>Flachheizkörper</li>
            <li>Planheizkörper</li>
          </ul>
        </div>
      </div>
    </div>
    <div id="Product-8" class="col-md-12 collapse">
      <div class="row">
        <div class="col-md-6 no-padding-left">
          <div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"></div>
        </div>
        <div class="col-md-6">
          <h3>Product 8</h3>
          <ul>
            <li>Flachheizkörper</li>
            <li>Planheizkörper</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
 解决方案 
A while back, I answered a similar question here: Bootstrap responsive grid layout (3 columns) with collapsed/hidden col-12 beneath each grid element
Basically you have to put the collapsed rows below the appropriate col-* to fit your smallest layout. So in your case:
  <div class="row">
            <div class="col-md-3 col-xs-6">
                <a href="#one" data-toggle="collapse"><img src="//placehold.it/600"></a>
            </div>
            <div class="col-md-3 col-xs-6">
                <a href="#two" data-toggle="collapse"><img src="//placehold.it/600"></a>
            </div>
            <div class="col-xs-12 overlay collapse" id="one">
                1
            </div>
            <div class="col-xs-12 overlay collapse" id="two">
                2
            </div>
            <div class="col-md-3 col-xs-6">
                <a href="#three" data-toggle="collapse"><img src="//placehold.it/600"></a>
            </div>
            <div class="col-md-3 col-xs-6">
                <a href="#four" data-toggle="collapse"><img src="//placehold.it/600"></a>
            </div>
            <div class="col-xs-12 overlay collapse" id="three">
               3
            </div>
            <div class="col-xs-12 overlay collapse" id="four">
               4
            </div>
   </div>

And then you'd need some extra CSS to overlay the collapse column so that it's full width under the entire row on larger screens.
Demo: http://www.codeply.com/go/0QGguzIYCx
For Bootstrap 4, this scenario is easier because of flexbox ordering..http://codeply.com/go/qdUGPVL4HJ (alpha 6) 
http://codeply.com/go/TLJi5MxQ1E (Bootstrap 4.0.0)
                        
这篇关于Bootstrap网格与之间的折叠容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-31 04:21
Powered by LMLPHP ©2024 折叠容器 0.038099