Bootstrap 响应式网格布局(3 列)，每个网格元素下方具有折叠/隐藏的 col-12
我正在尝试使 100% 列显示在引导网格的列内的元素下方.由于使用图片更容易理解，因此我想实现以下目标:
I'm trying to make a 100% column appear beneath an element inside a coloumn of a bootstrap grid. Since it's easier to understand with pictures, here what I am trying to achieve:
选择一个图像(1到x)时，隐藏的div(每个不同的内容)应在完整的12列大小的图像下显示:
When selecting one of the images (1 to x), a hidden div (with each different content) should appear beneath the image in the full 12 column size:
我设法做到了，但是，当使用较小的分辨率时，这个隐藏的 div 显示在第三个元素的下方，而不是元素 1 的下方.它应该是这样的:
I managed to do this, however, when using a smaller resolution, this hidden div is displayed beneath the third element, and not beneath element 1. This is how it should be:
很高兴得到一些帮助！
这里是实际版本的代码片段:
Here the code snippet of the actual version:
// hide all
$('.descriptions .panel').hide();
// handle img click
$('#grid img').click(function() {
// get index of the img that was clicked
var idx = $(this).parent().parent().parent().index();
var row = $(this).parent().parent().parent().parent().next('.row');
// remove special style from all others
$('#grid img').removeClass('highlight');
// add a special style to the clicked image
$(this).addClass('highlight');
// hide all others
$('.descriptions .panel').hide();
// show desc for clicked img
row.find('.descriptions .panel').eq(idx).show();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.img-responsive{
margin: 0 auto;
}
</style>
<!-- row 1 -->
<div class="row" id="grid">
<div class="col-sm-4 portfolio-item">
<figure class="gallery-item">
<div class="img-title-text">
<img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
<span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
</div>
</figure>
</div>
<div class="col-sm-4 portfolio-item">
<figure class="gallery-item">
<div class="img-title-text">
<img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
<span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
</div>
</figure>
</div>
<div class="col-sm-4 portfolio-item">
<figure class="gallery-item">
<div class="img-title-text">
<img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
<span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
</div>
</figure>
</div>
</div>
<!-- hidden row for images -->
<div class="row">
<div class="col-md-12 descriptions">
<div class="panel panel-default">
<div class="panel-body flex-grow">Content here for image 1.. Blah blah blah, blah blah. That is very interesting stuff. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
</div>
<div class="panel panel-default">
<div class="panel-body flex-grow">Content here for image 2.. Blah blah blah, blah blah. That is very interesting stuff. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
</div>
<div class="panel panel-default">
<div class="panel-body flex-grow">Content here for image 3.. Blah blah blah, blah blah. That is very interesting stuff. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
</div>
</div>
</div>
<!-- row 2 -->
<div class="row" id="grid">
<div class="col-sm-4 portfolio-item">
<figure class="gallery-item">
<div class="img-title-text">
<img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
<span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
</div>
</figure>
</div>
<div class="col-sm-4 portfolio-item">
<figure class="gallery-item">
<div class="img-title-text">
<img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
<span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
</div>
</figure>
</div>
<div class="col-sm-4 portfolio-item">
<figure class="gallery-item">
<div class="img-title-text">
<img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
<span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
</div>
</figure>
</div>
</div>
<!-- hidden row for images of row 2 -->
<div class="row">
<div class="col-md-12 descriptions">
<div class="panel panel-default">
<div class="panel-body flex-grow">Content here for image 1.. Blah blah blah, blah blah. That is very interesting stuff. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
</div>
<div class="panel panel-default">
<div class="panel-body flex-grow">Content here for image 2.. Blah blah blah, blah blah. That is very interesting stuff. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
</div>
<div class="panel panel-default">
<div class="panel-body flex-grow">Content here for image 3.. Blah blah blah, blah blah. That is very interesting stuff. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
</div>
</div>
</div>
[...]推荐答案
首先，我会将全宽列放在标记中适当的图像列下方，以便您在较小的屏幕上获得所需的布局.
First, I would place the full width column under the appropriate image column in your markup so you get the desired layout on smaller screens.
然后，您可以使用@media 查询在较大的屏幕上相应地调整隐藏行，使其全宽并覆盖父行.例如，为隐藏行赋予 overlay 类.
Then you can adjust hidden row accordingly on larger screens using a @media query so that it's full width and overlays the parent row. For example, give the hidden rows the overlay class.
@media (min-width:992px) {
.row {
position:relative;
padding: 30px;
}
.overlay {
position: absolute;
z-index:1;
width: 100%;
bottom: 0;
}
}
您可以使用 Bootstrap 的折叠组件来显示/隐藏隐藏的内容.
You can use Bootstrap's collapse component to show/hide the hidden content.
演示 http://www.codeply.com/go/qhVNyUFOvj
相关文章