html – Bootstrap响应式网格布局(3列),每个网格元素下方都有折叠/隐藏的col-12

我正在尝试使100％列出现在引导网格的coloumn内的元素下面.因为用图片更容易理解,所以我想要实现的目标：

选择其中一个图像(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,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,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,in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
	</div>
    
  </div>
</div>
[...]

解决方法

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

然后,您可以使用@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

html – Bootstrap响应式网格布局(3列),每个网格元素下方都有折叠/隐藏的col-12

解决方法

猜你在找的HTML相关文章