我试图使 100% 列出现在引导网格列内的元素下方。因为用图片更容易理解，所以我想要实现的目标是：
选择其中一张图像（1 到 x）时，隐藏的 div（具有不同的内容）应以完整的 12 列大小显示在图像下方：
我设法做到了这一点，但是，当使用较小的分辨率时，这个隐藏的 div 显示在第三个元素下方，而不是元素 1 下方。它应该是这样的：
很高兴获得一些帮助！
这是实际版本的代码片段：
// 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>
[...]
首先，我会将全宽列放置在标记中适当的图像列下方，以便您在较小的屏幕上获得所需的布局。
然后，您可以使用 @media 查询在较大的屏幕上相应地调整隐藏行，使其具有全宽并覆盖父行。例如，为隐藏行指定overlay class.
@media (min-width:992px) {
.row {
position:relative;
padding: 30px;
}
.overlay {
position: absolute;
z-index:1;
width: 100%;
bottom: 0;
}
}
您可以使用 Bootstrap 的折叠组件来显示/隐藏隐藏内容。
Demo http://www.codeply.com/go/qhVNyUFOvj http://www.codeply.com/go/qhVNyUFOvj
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
