Bootstrap响应式网格布局（3列），每个网格元素

Question

我试图让100％的列出现在引导网格的coloumn内的元素下面。由于图片更容易理解，这就是我想要实现的目标：

当选择其中一个图像（1到x）时，隐藏的div（每个不同的内容）应该以完整的12列大小显示在图像下方：

我设法做到了这一点，但是，当使用较小的分辨率时，这个隐藏的div显示在第三个元素下面，而不是在元素1下面。这就是它应该是这样的：

很高兴能得到一些帮助！

这是实际版本的代码段：

＆＃13;

＆＃13;

// 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();

	});

＆＃13;

<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>
[...]

＆＃13;

＆＃13;

＆＃13;

Answer 1

您是否尝试过直接在该图像下方为每个图像添加隐藏的div？如果您在每个图像的下方/右侧使用Bootstrap可折叠，并将其隐藏，然后应用所需的功能，则应该获得您正在寻找的内容。您是否有理由不想使用单独的＆lt; div＆gt;每个描述？

Answer 2

首先，我将全宽度列放在标记中相应的图像列下，以便在较小的屏幕上获得所需的布局。

然后，您可以使用@media查询在较大的屏幕上相应地调整隐藏行，以便它的全宽并覆盖父行。例如，为隐藏的行提供overlay类。

@media (min-width:992px) {
    .row {
        position:relative;
        padding: 30px;
    }
    .overlay {
      position: absolute;
      z-index:1;
      width: 100%;
      bottom: 0;
    }
}

您可以使用Bootstrap的折叠组件来显示/隐藏隐藏的内容。

演示 http://www.codeply.com/go/qhVNyUFOvj