我在我的网站上使用 Bootstrap 3,我有很多帖子。现在我正在使用 Bootstrap 列和面板在索引页面上显示帖子。
但我想像 Pinterest 页面一样在平铺 View 中显示相同的帖子。
在 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>
当前 View
预期 View
最佳答案
如果您的帖子高度相同,那么您可以使用 col-md-*
类来包装在 row
中的图 block 。每行都会根据您想要的帖子数量发布帖子。
<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
这样的插件。
请参阅此处的动态高度图 block 示例: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>
关于css - 如何在 Bootstrap 中创建磁贴布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32135519/