Bootstrap堆栈行中的间隙

Bootstrap堆栈行中的间隙

有两种方法可以解决此问题：

1. 给投资组合中的所有元素设定一个高度。
2. 使用砌体之类的方法将元素动态“拟合”到可用空间中。
3. 按照 Grid部分中“ 响应性列 resets”标题下的文档中的说明使用响应类和clearfix 。
4. 使用jQuery动态调整列高。

如果您的内容是动态生成的，以至于您不知道哪些元素将具有更长的内容，并且为不同的断点设置了不同的布局，则响应类方法可能会让人难以适应。我使用了一些技巧。在网格中的每个元素之后，我添加了一个div，我可以在使用媒体查询时应用一个miniclearfix。这是额外的标记，但是它很好地解决了问题，并允许我拥有可读性和可维护性的标记，同时避免使用javascript来调整布局。这是使用标记的示例：

更新了Bootply

<div > <!--Add a class so you can target with nth-child-->    <div >        <div > <div >     <a href="#">         <img src="http://placehold.it/200x200" >     </a> </div> <div >     This is text </div>          </div>     </div>    <div ></div> <!--Here's the added div after every element-->  ....</div> <!--/.portfolio.row-->

CSS：

@media (max-width: 767px) {    .portfolio>.clear:nth-child(6n)::before {      content: '';      display: table;      clear: both;    }}@media (min-width: 768px) and (max-width: 1199px) {    .portfolio>.clear:nth-child(8n)::before {      content: '';      display: table;      clear: both;    }}@media (min-width: 1200px) {    .portfolio>.clear:nth-child(12n)::before {        content: '';      display: table;      clear: both;    }}

如果您更喜欢jQuery路线（同样，这假设您已在包含投资组合元素的行中添加了一个“投资组合”类，以便于定位）：

var row=$('.portfolio');$.each(row, function() {    var maxh=0;    $.each($(this).find('div[class^="col-"]'), function() {        if($(this).height() > maxh) maxh=$(this).height();    });    $.each($(this).find('div[class^="col-"]'), function() {        $(this).height(maxh);    });});