Question

在我的页面中，我有三列和多行来显示以下元素

<div class="col-sm-4">
<img src="<?php echo $myURL; ?>" class="img-responsive img-thumbnail">
<p class="lead"><?php echo $mytext; ?></p>
</div>

当所有$ mytext的大小相同（行数）时，显示是完美的。但是，如果连续元素A和B有2行$ mytext而元素C有3行，则下一行中的元素C不会显示。

我该怎样防止这种情况？理想情况下，行高应该是行中三个元素高度的最高值。

编辑：如果您转到http://bit.ly/1HfHiqC并缩小窗口宽度，您会看到我在说什么。

Answer 1

如果您使用循环生成内容，请像这样说

foreach ($posts as $post) {
  echo '<div class="col-sm-4">';
  ...
}

然后你需要设置counter为每个col-n * x = 12 DIV添加一个clearfix类，以清除浮点数。在您的示例中，您有n = 4，这意味着您必须在每第3次迭代时清除它。总结一下，当你的row已满，而下一行以一组新的cols开头时，你必须在该行的第一个div中添加一个类。

$clearfix = 0;
foreach ($posts as $post) {
  if ($clearfix % 3 == 0) { $clear_class = "clearfix"; } else { $clearfix = ""; }
  echo '<div class="col-sm-4 '.$clear_class.'">';
...
  $clearfix++;
}

在您的CSS中，您需要添加以下内容

.clearfix { clear: both; }

这应该可以解决你的问题。

可变高度col-sm-4 divs在bootstrap上

1 个答案: