当一行中有超过 12 列并且它们的高度不同时，列不能正确换行答案

【问题标题】：Columns don't wrap properly when there are more than 12 columns in a row and they are of different height当一行中有超过 12 列并且它们的高度不同时，列不能正确换行
【发布时间】：2015-08-03 16:19:39
【问题描述】：

考虑一下：

<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 上之前。

【问题讨论】：

您不需要修改带有样式的网格元素。我几乎从不将自定义类或其他修饰符应用于容器、行或列。修改网格内的元素，并为初始加载时的悬停效果留出空间。移动整个页面的悬停效果让访问者感到疲倦和烦人。
@isherwood - 哈哈！是的，我只是注意到，即使在进行了适当的更改之后，这样做也感觉不是很好。我要从一开始就让事情变得可见！

标签： html css twitter-bootstrap

【解决方案1】：

Bootstrap 包含用于解决此问题的 CSS，在文档中的 Responsive column resets 中进行了描述。

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

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

【讨论】：

类似this？它不工作。你能告诉我哪里出错了吗？
好的，想通了。我必须使用<div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div> 来确保它适用于所有屏幕尺寸。它不只是从xs 传播（？）到lg！