Twitter bootstrap 不同高度的自举流体网格系统
我是新手。我想使用具有不同高度和相同宽度的流体栅格系统栅格,如下图所示Twitter bootstrap 不同高度的自举流体网格系统,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,我是新手。我想使用具有不同高度和相同宽度的流体栅格系统栅格,如下图所示 如何实现相同的功能?请帮帮我。使用“开箱即用”引导实现这一点的唯一方法是使用4列并在每个列中堆叠项目。当您不知道每列中有多少项时,这对于动态内容并不理想。此外,项目顺序从上到下,而不是从左到右 否则,您必须使用jQuery插件,如或,或使用CSS3多列 Jquery插件方法 CSS3柱方法(类似砌体的CSS解决方案) 这不是Bootstrap3的固有特性,而是使用的另一种方法。这种方法的一个缺点是列的顺序是从上到下
如何实现相同的功能?请帮帮我。使用“开箱即用”引导实现这一点的唯一方法是使用4列并在每个列中堆叠项目。当您不知道每列中有多少项时,这对于动态内容并不理想。此外,项目顺序从上到下,而不是从左到右
否则,您必须使用jQuery插件,如或,或使用CSS3多列 Jquery插件方法
CSS3柱方法(类似砌体的CSS解决方案) 这不是Bootstrap3的固有特性,而是使用的另一种方法。这种方法的一个缺点是列的顺序是从上到下,而不是从左到右 还有一个类似的问题 2018年更新 Bootstrap 4包括使用CSS3多列的类似砖石的解决方案:
正如我所见,您的列具有固定的宽度。 这样你就可以写作了
<div class="col-xs-4">
boxes
</div>
<div class="col-xs-4">
boxes
</div>
<div class="col-xs-4">
boxes
</div>
盒
盒
盒
将其复制到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>
自bootstrap 4 alpha版本起:
您还可以使用.card columns
类来包装引导4.cards
类元素,以实现Skelly提到的“砖石”列效果:
文档:引导程序
v4.0.0-beta.2
卡列
换行的卡片标题
这是一张较长的卡片,下面的支持文本是附加内容的自然引入。这个内容有点长
Lorem ipsum dolor sit amet,是一位杰出的献身者。整数赌注
在源代码标题中有名的人
卡片标题
此卡片具有以下支持文本,作为附加内容的自然引入
上次更新是在3分钟前
Lorem ipsum dolor sit amet,是一位杰出的献身者。整数posuere-erat
在源代码标题中有名的人
卡片标题
此卡片具有以下支持文本,作为附加内容的自然引入
上次更新是在3分钟前
Lorem ipsum dolor sit amet,是一位杰出的献身者。整数赌注
在源代码标题中有名的人
卡片标题
这是一张更宽的卡片,下面的支持文本是附加内容的自然引入。这张卡片的内容甚至比第一张要长,以显示等高动作
上次更新是在3分钟前
与PHP无关。你可以这样做。每列可能包含具有不同高度的元素–这是默认值。相反,获得等高列要复杂一些。可能与更好的方法重复:)
<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>