Css 如何在引导中创建平铺布局

我在我的网站上使用Bootstrap3，在那里我有很多帖子。现在我正在使用引导列和面板在索引页上显示帖子

但我想在平铺视图中显示相同的帖子，就像Pinterest页面一样

在Bootstrap3中有什么方法可以做到这一点吗？现在我的布局看起来像

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

HTML:

这是一个老问题，但我在搜索同一个问题时遇到了这个问题，所以为遇到这个问题的其他人发布了一个答案

添加引导v4并使用卡功能

关于向后兼容性的一个注意事项是，当只使用v4而不是v3时，这打破了我测试时的许多布局。因此，要使用卡片功能而不必修改大量布局，请将CSS文件添加到页面中，这样就可以同时使用v3和v4。确保v4是页面上的第一个，v3是页面上的最后一个，以便在浏览器加载它们时v3优先
 请向我们展示当前输出和预期输出屏幕截图。@ManojKumar我已经更新了我的帖子，请特别检查，这是完成工作的原因。
#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;
}

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