CSS 如何在 Bootstrap 中创建平铺布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32135519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I create a tile layout in Bootstrap
提问by CJAY
I am using Bootstrap 3 for my site, where I have numerous posts. Right now I am using bootstrap columns and panels to display the posts on an index page.
我在我的网站上使用 Bootstrap 3，在那里我有很多帖子。现在我正在使用引导列和面板在索引页面上显示帖子。
But I want to show the same posts in a tile view like a Pinterest page.
但我想像 Pinterest 页面一样在平铺视图中显示相同的帖子。
Is there any way to do that in bootstrap 3? Right now my layout looks something like
有没有办法在引导程序 3 中做到这一点？现在我的布局看起来像
<div class="row product-list">
<?php getList(); ?>
</div>
where the function gets the list of posts. and they are displayed in a panel like this:
该函数获取帖子列表的位置。它们显示在这样的面板中：
<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>
Current view
目前来看
Expected view
预期视图
采纳答案by K K
If your posts are of same height then you can use the col-md-*classes for the tiles wrapped inside a row. Each row will have posts based on the number of posts you want.
如果您的帖子具有相同的高度，那么您可以将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>
If the posts are of variable height then I will suggest you to use a plugin like masonry
如果帖子的高度可变，那么我建议您使用类似的插件 masonry
See the example here for dynamic height tiles : http://masonry.desandro.com/layout.html#imagesloaded
请参阅此处的动态高度图块示例：http: //masonry.desandro.com/layout.html#imagesloaded
A basic example using CSS
使用 CSS 的基本示例
Demo: http://jsfiddle.net/tQANc/590/
演示：http: //jsfiddle.net/tQANc/590/
CSS:
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:
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>
回答by Michael Cropper
Old question, but I came across this when searching for the same problem, so posting an answer for others who come across this.
老问题，但我在搜索相同问题时遇到了这个问题，因此为遇到此问题的其他人发布了一个答案。
Add Bootstrap v4and use the Cards functionality, http://v4-alpha.getbootstrap.com/components/card/
添加Bootstrap v4并使用卡片功能，http://v4-alpha.getbootstrap.com/components/card/
A note on backwards compatability, when just using v4 and not v3, this broke a lot of layouts when I was testing. So to use the Cards functionality without having to rework a lot of your layouts, add the CSS file to your page so you're using v3 and v4 alongside each other. Make sure v4 is first and v3 is last on the page in that order so that v3 takes priority when the browser loads these in.
关于向后兼容性的说明，当只使用 v4 而不是 v3 时，这在我测试时破坏了很多布局。因此，要使用卡片功能而不必重新设计大量布局，请将 CSS 文件添加到您的页面，这样您就可以同时使用 v3 和 v4。确保 v4 是第一个，v3 是最后一个，这样当浏览器加载它们时，v3 优先。
