Bootstrap 响应式网格布局(3 列)，每个网格元素下方具有折叠/隐藏的 col-12 [英] Bootstrap responsive grid layout (3 columns) with collapsed/hidden col-12 beneath each grid element

问题描述

我正在尝试使 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

这篇关于Bootstrap 响应式网格布局(3 列)，每个网格元素下方具有折叠/隐藏的 col-12的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！