Question

考虑一下：

<div class="container">
  <div class="row">
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
  </div>
</div>

和此：

.col-xs-2 {
    height: 20px;
    border: 1px solid black;
}

.col-xs-2:hover {
    height: 25px;
}

（或者你可以访问this page）

最初所有列都具有相同的高度，并且它们显示为两行项目，一个在另一个下面。到目前为止一切都很好。

在鼠标悬停在div上时，它的高度增加5px，新行从此div开始，而不是在开始时。它像行的其余部分一样留下5px空间（或任何需要的空间）并从头开始。

注意：即使div的大小最初大于其行中其他div的大小，也会发生这种情况。

到目前为止，我已尝试设置margin-top，padding-top和float：left但是没有取得多大成功。

PS：我每行超过12列，因为这些元素是动态生成的，并且可以在不同大小的设备上无缝工作。至少有人在一个div上盘旋。

Answer 1

Bootstrap包含用于解决此问题的CSS，如文档中的Responsive column resets所述。

您需要在每个第六列之后添加类似的内容：

<div class="clearfix visible-xs-block"></div>

如果一行中有超过12列并且它们的高度不同，则列不能正确包装

1 个答案: