这是我的第一个问题,我希望你能帮助我。我正在尝试使用引导网格设置产品概述页面。我已经连续购买了 4 款大屏幕产品。对于较小的屏幕尺寸,我希望每行有 2 个产品。
诀窍是,我想将产品详细信息放在行之间的折叠容器中,当我单击产品时,该容器会打开。它适用于 4 个产品的大屏幕尺寸。但是如何实现折叠的容器在我单击产品的行之后立即显示,而与每行有多少产品无关。在较小的尺寸上,即使我单击第一行中的产品,折叠的容器也会在第二行之后打开。
当我将每个折叠的容器放在标记中的产品后面时,当我打开它时,它会推开其他产品。
抱歉,这有点复杂,我希望你明白我的意思。
为了更好地理解,请查看我在 codepen 上的笔。
我想让它尽可能简单,但我不确定该走哪条路?
http://codepen.io/auftakt/pen/PWxJVX
坦克给所有人。
$('.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>
不久前,我在这里回答了一个类似的问题:Bootstrap 响应式网格布局(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 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>
然后你需要一些额外的CSSoverlay
折叠列,使其在较大屏幕上的整行下方具有全宽。
Demo: http://www.codeply.com/go/0QGguzIYCx
对于 Bootstrap 4,这种情况更容易,因为弹性盒订购..
http://codeply.com/go/qdUGPVL4HJ(阿尔法6)
http://codeply.com/go/TLJi5MxQ1E (引导程序4.0.0)
http://codeply.com/go/EsRR1nGa36 (引导程序4.3.0)
也可以使用 jQuery/JS 来处理排序逻辑:https://codeply.com/p/Fs1zOQCk1q
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)