- 首页
- 其他开发
- 不同高度的 Bootstrap 流体网格系统
不同高度的 Bootstrap 流体网格系统
[英] Bootstrap Fluid grid system with different height
本文介绍了不同高度的 Bootstrap 流体网格系统的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 Bootstrap 的新手.我想使用具有不同高度和相同宽度的流体网格系统网格，如下图 .
我该如何实现?请帮帮我.
解决方案
使用开箱即用"的 Bootstrap 做到这一点的唯一方法是使用 4 列并在每列中堆叠项目.当您不知道每列中有多少项时，这对于动态内容来说并不理想.此外，项目的顺序是从上到下，而不是从左到右.
<div class="row"><div class="col-md-3"><!--item1--><!--item2--><!--item3--><!--item4-->
<div class="col-md-3"><!--item5--><!--item6--><!--item7--><!--item8-->
<div class="col-md-3"><!--项目--><!--项目--><!--项目-->
<div class="col-md-3"><!--项目--><!--项目--><!--项目--><!--项目--><!--项目-->
<小时>否则，您必须使用 jQuery 插件，例如 Masonry 或 同位素，或使用 CSS3 多列.
Jquery插件方法
Bootstrap Masonry 演示
Bootstrap Masonry Demo 2
CSS3 列方法(类似 Masonry 的 CSS 解决方案)..
这不是 Bootstrap 3 原生的，而是另一种使用 CSS 多列.这种方法的一个缺点是列顺序是从上到下，而不是从左到右.
CSS3 多列演示
还有 这个答案中有更详细的信息 到一个类似的问题.
2018 年更新
Bootstrap 4 包含使用 CSS3 多列的类似 Masonry 的解决方案:砌体卡演示
I am new in Bootstrap. I want to use the fluid grid system grid with different height and same width like the following image .
How can i implement the same? Please help me.
解决方案
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.
<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>
Otherwise, you have to use a jQuery plugin like
Masonry or
Isotope, or using CSS3 multi-columns.
Jquery plugin method
Bootstrap Masonry Demo
Bootstrap Masonry Demo 2
CSS3 columns method (Masonry-like CSS solution)..
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-bottom instead of left-to-right.
CSS3 multi-columns Demo
There is also more detailed info in this answer to a similar question.
Update 2018
Bootstrap 4 includes a Masonry-like solution using CSS3 multi-columns:
Masonry cards Demo
这篇关于不同高度的 Bootstrap 流体网格系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
