大佬教程收集整理的这篇文章主要介绍了html – Bootstrap响应式网格布局(3列),每个网格元素下方都有折叠/隐藏的col-12,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
选择其中一个图像(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> [...]
以上是大佬教程为你收集整理的html – Bootstrap响应式网格布局(3列),每个网格元素下方都有折叠/隐藏的col-12全部内容,希望文章能够帮你解决html – Bootstrap响应式网格布局(3列),每个网格元素下方都有折叠/隐藏的col-12所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。