2
我試圖讓一個100％列出現在引導網格的coloumn內部的一個元素下面。因爲它更容易用圖片來了解，這裏就是我想實現：引導響應網格佈局（3列）與每個網格元素下方的摺疊/隱藏col-12
當選擇一個圖像（1至x），一個隱藏的DIV（每個不同的內容）應該會出現下面的圖像中的全部12列大小：
我成功地做到這一點，但是，使用較小的分辨率時，這個隱藏的div顯示第三元素之下，而不是下面元素1.本是怎麼回事ULD是：
會高興一些幫助！
這裏的實際版本的代碼片段：
// hide all
\t $('.descriptions .panel').hide();
\t // handle img click
\t $('#grid img').click(function() {
\t // get index of the img that was clicked
\t var idx = $(this).parent().parent().parent().index();
\t var row = $(this).parent().parent().parent().parent().next('.row');
\t // remove special style from all others
\t $('#grid img').removeClass('highlight');
\t // add a special style to the clicked image
\t $(this).addClass('highlight');
\t // hide all others
\t $('.descriptions .panel').hide();
\t // show desc for clicked img
\t row.find('.descriptions .panel').eq(idx).show();
\t });<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{
\t margin: 0 auto;
}
</style>
<!-- row 1 -->
<div class="row" id="grid">
\t <div class="col-sm-4 portfolio-item">
\t \t <figure class="gallery-item">
\t \t \t <div class="img-title-text">
\t \t \t \t <img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
\t \t \t \t <span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
\t \t \t </div>
\t \t </figure>
\t </div>
\t <div class="col-sm-4 portfolio-item">
\t \t <figure class="gallery-item">
\t \t \t <div class="img-title-text">
\t \t \t \t <img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
\t \t \t \t <span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
\t \t \t </div>
\t \t </figure>
\t </div>
\t <div class="col-sm-4 portfolio-item">
\t \t <figure class="gallery-item">
\t \t \t <div class="img-title-text">
\t \t \t \t <img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
\t \t \t \t <span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
\t \t \t </div>
\t \t </figure>
\t </div>
</div>
<!-- hidden row for images -->
<div class="row">
<div class="col-md-12 descriptions">
\t <div class="panel panel-default">
\t <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
\t dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
\t </div>
\t <div class="panel panel-default">
\t <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
\t dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
\t </div>
\t <div class="panel panel-default">
\t <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
\t dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
\t </div>
</div>
</div>
<!-- row 2 -->
<div class="row" id="grid">
\t <div class="col-sm-4 portfolio-item">
\t \t <figure class="gallery-item">
\t \t \t <div class="img-title-text">
\t \t \t \t <img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
\t \t \t \t <span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
\t \t \t </div>
\t \t </figure>
\t </div>
\t <div class="col-sm-4 portfolio-item">
\t \t <figure class="gallery-item">
\t \t \t <div class="img-title-text">
\t \t \t \t <img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
\t \t \t \t <span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
\t \t \t </div>
\t \t </figure>
\t </div>
\t <div class="col-sm-4 portfolio-item">
\t \t <figure class="gallery-item">
\t \t \t <div class="img-title-text">
\t \t \t \t <img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
\t \t \t \t <span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
\t \t \t </div>
\t \t </figure>
\t </div>
</div>
<!-- hidden row for images of row 2 -->
<div class="row">
<div class="col-md-12 descriptions">
\t <div class="panel panel-default">
\t <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
\t dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
\t </div>
\t <div class="panel panel-default">
\t <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
\t dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
\t </div>
\t <div class="panel panel-default">
\t <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
\t dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
\t </div>
</div>
</div>
[...]
這正是我需要的！感謝您提供乾淨簡單的解決方案 – jmd
任何想法如何讓隱藏的行更大（比如400px）並將元素4-6的行按此大小向下移動？這裏是您的代碼的一個分支：http://www.codeply.com/go/e1XIJn564r – jmd
我通過向@media查詢添加一個圖像底部的邊距來管理它：'a [data-toggle = collapse]：不是（.collapsed）> img { \t \t \t margin-bottom：280px; \t \t}' – jmd