带有折叠容器的引导网格 [英] Bootstrap grid with collapsed container in between
本文介绍了带有折叠容器的引导网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我在这里的第一个问题，希望您能帮助我.我正在尝试使用引导网格设置产品概述页面.我连续有 4 个产品用于大屏幕尺寸.对于较小的屏幕尺寸，我希望每行有 2 个产品.
诀窍是，我希望将产品详细信息放在行之间的折叠容器中，当我单击产品时，该容器会打开.它适用于具有 4 种产品的大屏幕尺寸.但是如何实现折叠的容器在我点击我的产品的行之后立即显示，与我每行有多少产品无关.在较小的尺寸上，折叠的容器在第二行之后打开，即使我单击第一行中的产品.
当我在标记中将每个折叠的容器放在产品后面时，当我打开它时它会推开其他产品.
对不起，有点复杂，希望你明白我的意思.
为了更好地理解，请查看我在 codepen 上的笔.
我想让它尽可能简单，但我不确定该走哪条路?
http://codepen.io/auftakt/pen/PWxJVX
坦克给大家.
$('.collapse-btn').on('click',function(){$('.collapse').collapse('隐藏');})body {边距顶部:50px；溢出-y:滚动；}.img 响应 {宽度:100%；}.col-xs-6{边距底部:20px；}.产品信息 {宽度:100%；高度:300px；背景尺寸:封面；背景位置:中心中心；}.no-padding-left {左填充:0；}.product-collapse-wrap >分区 {边距底部:20px；}<div class="container"><div 类="行"><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 类="行"><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>产品 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 类="行"><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>产品 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 类="行"><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>产品 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 类="行"><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>产品 4</h3><ul><li>Flachheizkörper</li><li>Planheizkörper</li></ul></div></div></div><div 类="行"><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 类="行"><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>产品 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 类="行"><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>产品 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 类="行"><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>产品 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 类="行"><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>产品 8</h3><ul><li>Flachheizkörper</li><li>Planheizkörper</li></ul></div></div></div></div> 解决方案
不久前，我在这里回答了一个类似的问题:引导响应式网格布局(3 列)在每个网格元素下方折叠/隐藏 col-12
基本上，您必须将折叠的行放在适当的 col-* 下方以适合您的最小布局.所以在你的情况下:
<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 叠加折叠" id="one">1</div><div class="col-xs-12 叠加折叠" 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 叠加折叠" id="three">3</div><div class="col-xs-12 叠加折叠" id="four">4</div></div>然后您需要一些额外的 CSS 来覆盖折叠列，以便它在大屏幕上的整行下方是全宽.
演示:http://www.codeply.com/go/0QGguzIYCxp>
对于 Bootstrap 4，由于 flexbox 排序，这个场景更容易.http://codeply.com/go/qdUGPVL4HJ(alpha 6)
http://codeply.com/go/TLJi5MxQ1E (Bootstrap 4.0.0)
http://codeply.com/go/EsRR1nGa36 (Bootstrap 4.3.0)
也可以使用 jQuery/JS 来处理排序逻辑:https://codeply.com/p/Fs1zOQCk1q
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)
http://codeply.com/go/EsRR1nGa36 (Bootstrap 4.3.0)
It's also possible to use jQuery/JS to handle the ordering logic: https://codeply.com/p/Fs1zOQCk1q
这篇关于带有折叠容器的引导网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
