如何在Bootstrap中创建切片布局

Question

我在我的网站上使用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>

目前来看

预期的观点

Answer 1

如果您的帖子高度相同,那么您可以使用包含col-md-*在其中的瓷砖的类row.每行都会根据您想要的帖子数量发布帖子.

<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>

Answer 2

旧问题，但是在搜索相同问题时遇到了这个问题，因此请为其他遇到此问题的人发布答案。

添加Bootstrap v4并使用Cards功能，http：//v4-alpha.getbootstrap.com/components/card/

关于向后兼容性的说明，当仅使用v4而不是v3时，这在我测试时破坏了很多布局。因此，要使用Cards功能而不必重做很多布局，请将CSS文件添加到页面中，以便同时使用v3和v4。确保v4在该页面上排在最前，v3在该页面上排在最后，以便当浏览器将它们加载时，v3优先。