twitter-bootstrap 不同高度的 Bootstrap 流体网格系统
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19244268/
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
Bootstrap Fluid grid system with different height
提问by Nandu
I am new in Bootstrap. I want to use the fluid grid system grid with different height and same width like the following image 
.
我是 Bootstrap 的新手。我想使用具有不同高度和相同宽度的流体网格系统网格，如下图所示。
How can i implement the same? Please help me.
我该如何实施？请帮我。
回答by Zim
The only way to do this with Bootstrap "out-of-the-box" would be to use 4 columns and stack the items in each. This isn't ideal for dynamic content when you don't know how many items you'll have in each column. Also the items order top-to-bottom,and not left-to-right.
使用 Bootstrap“开箱即用”做到这一点的唯一方法是使用 4 列并将项目堆叠在每列中。当您不知道每列中有多少项目时，这对于动态内容来说并不理想。此外，项目从上到下排序，而不是从左到右。
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<!--item1-->
<!--item2-->
<!--item3-->
<!--item4-->
</div>
<div class="col-md-3">
<!--item5-->
<!--item6-->
<!--item7-->
<!--item8-->
</div>
<div class="col-md-3">
<!--item-->
<!--item-->
<!--item-->
</div>
<div class="col-md-3">
<!--item-->
<!--item-->
<!--item-->
<!--item-->
<!--item-->
</div>
</div>
</div>
否则，你必须使用像这样的 jQuery 插件 Masonry砌体或IsotopeIsotope，或使用 CSS3 多列。
Jquery plugin method
jquery插件方法
Bootstrap Masonry Demo
Bootstrap Masonry Demo 2
Bootstrap Masonry 演示
Bootstrap Masonry 演示 2
CSS3 columns method (Masonry-like CSS solution)..
CSS3 列方法（类似砌体的 CSS 解决方案）。
This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottominstead of left-to-right.
这不是 Bootstrap 3 原生的，而是另一种使用CSS multi-columns 的方法。这种方法的一个缺点是列顺序是从上到下而不是从左到右。
There is also more detailed info in this answerto a similar question.
Update 2018
2018 年更新
Bootstrap 4includes a Masonry-like solution using CSS3 multi-columns: Masonry cards Demo
Bootstrap 4包含使用 CSS3 多列的类似 Masonry 的解决方案： Masonry card Demo
回答by core114
Bootstrapv4.0.0-beta.2Card columns
引导v4.0.0-beta.2卡列
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img" src="..." alt="Card image">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>You can learn more about it https://getbootstrap.com/docs/4.0/components/card/
您可以了解更多信息 https://getbootstrap.com/docs/4.0/components/card/
回答by clovola
As of bootstrap 4 alpha release:
从 bootstrap 4 alpha 版本开始：
You can also use the .card-columnsclass to wrap your bootstrap 4 .cardsclass elements to achieve the 'Masonry' column effect @Skelly mentioned:
您还可以使用.card-columns该类来包装您的引导程序 4 个.cards类元素，以实现@Skelly 提到的“砌体”列效果：
documentation: https://v4-alpha.getbootstrap.com/components/card/#columns
文档：https: //v4-alpha.getbootstrap.com/components/card/#columns
回答by user5979544
Copy this to sample body on your html as seeing this easier to understand than explaining.
将此复制到您的 html 上的示例正文，因为这比解释更容易理解。
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12" style="height:100px; background-color:red"></div>
<div class="col-md-12" style="height:100px; background-color:yellow"></div>
<div class="col-md-12" style="height:100px; background-color:gray"></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12" style="height:200px; background-color:blue"></div>
<div class="col-md-12" style="height:100px; background-color:black"></div>
</div>
</div>
</div>
</div>
回答by Zakos
As i can see you have fixed width at you columns. So you can write
正如我所看到的，你的列有固定的宽度。所以你可以写
<div class="col-xs-4">
boxes
</div>
<div class="col-xs-4">
boxes
</div>
<div class="col-xs-4">
boxes
</div>
