html col 隐藏,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();

});

.img-responsive{

margin: 0 auto;

}

text

text

text

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.

Content here for image 2.. Blah blah blah,in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis.

Content here for image 3.. Blah blah blah,in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis.

text

text

text

Content here for image 1.. Blah blah blah,in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis.

[...]