我在我的网站上使用Bootstrap 3,我有很多帖子.现在我使用bootstrap列和面板来显示索引页面上的帖子.
但我想在瓷砖视图中显示相同的帖子,如Pinterest页面.
在bootstrap 3中有没有办法做到这一点？现在我的布局看起来像
<div class="row product-list">
<?PHP getList(); ?>
</div>
<a href="product-des.PHP?1"> <div class='col-xs-12 col-sm-4 col-md-3 col-lg-3'><div class='panel panel-warning'> <div class='panel-heading'>Microsoft Lumia 575</div> <div class='panel-body'> <img class='product_listing_img img-responsive' src=files/uploaded_images/mobile-2.jpg></div> </div> </div> </a>
目前来看
预期的观点
解决方法
如果您的帖子高度相同,那么您可以将col-md- *类用于包含在行内的切片.每行都会根据您想要的帖子数量设置帖子.
<div class="row">
<div class="col-md-2">Title Test</div>
<div class="col-md-2">Title Test</div>
<div class="col-md-2">Title Test</div>
<div class="col-md-2">Title Test</div>
<div class="col-md-2">Title Test</div>
<div class="col-md-2">Title Test</div>
</div>
如果帖子的高度可变,那么我建议你使用像masonry这样的插件
有关动态高度图块,请参阅此处的示例：http://masonry.desandro.com/layout.html#imagesloaded
使用CSS的基本示例
演示：http://jsfiddle.net/tQANc/590/
CSS：
#container {
width: 100%;
max-width: 700px;
margin: 2em auto;
}
.cols {
-moz-column-count:3;
-moz-column-gap: 3%;
-moz-column-width: 30%;
-webkit-column-count:3;
-webkit-column-gap: 3%;
-webkit-column-width: 30%;
column-count: 3;
column-gap: 3%;
column-width: 30%;
}
.Box {
margin-bottom: 20px;
height:100px;
background:#BFBFBF;
}
HTML：
<div id="container" class="cols">
<div class="Box"></div>
<div class="Box"></div>
<div class="Box"></div>
<div class="Box"></div>
<div class="Box"></div>
<div class="Box"></div>
<div class="Box"></div>
<div class="Box"></div>
<div class="Box"></div>
<div class="Box"></div>
<div class="Box"></div>
<div class="Box"></div>
<div class="Box"></div>
<div class="Box"></div>
</div>
