Bootstrap行高度随个别div而变化

Bootstrap container row有col-lg-3类。 从具有不同文本长度的SQL查询返回超过100篇文章。 每篇文章（数字为1,2,3等）分别放在

标签上。 但我的输出如下：

但是我需要

用PHP代码的HTML

 
 
 <?php foreach ($value as $add) { echo "
"; echo $add->article_item; // column name is article_item echo "
"; } ?> 
  

Answer 1

您需要更改数据的结构 – 这样的事情会起作用：

 '.$add->article_item.'
'; break; case 1: $articleContainer[1] .= '
'.$add->article_item.'
'; break; case 2: $articleContainer[2] .= '
'.$add->article_item.'
'; break; case 3: $articleContainer[3] .= '
'.$add->article_item.'
'; break; default: echo 'error'; } $count++; } ?> 
 
 
  
 
  
 
  
 
  
 
  

Answer 2

两种可能的修复方法1.你需要在容器内的4 col-lg-3 or col-md-3之后关闭每个

，因为col-lg-3 / col-md-3具有动态高度，第5列将堆叠到上面一行的最高列，因为它无法清除：由于最高列的高度而离开。 2.使用jQuery Isotope或任何类似的插件。

Answer 3

你将有4个col-md-3包含你想要的col-md-12（第一篇文章1,5,9 ..，第二篇文章2,6,10 ……等）

 
 # $i % 4 === 1 
Article 1
 
Article 5
 ... 
 
 # $i % 4 === 2 
Article 2
 
Article 6
 ... 
 
 # $i % 4 === 3 
Article 3
 
Article 7
 ... 
 
 # $i % 4 === 0 
Article 4
 
Article 8
 ...  

这应该工作：

  
 
 "; $col2="
"; $col3="
"; $col4="
"; foreach ($value as $add) { if($i % 4 === 1) { $col1 = $col1 ."
".$add->article_item."
"; } if($i % 4 === 2) { $col2 = $col2 ."
".$add->article_item."
"; } if($i % 4 === 3) { $col3 = $col3 ."
".$add->article_item."
"; } if($i % 4 === 0) { $col4 = $col4 ."
".$add->article_item."
"; } $i++; } $col1 = $col1 . "
"; $col2 = $col2 . "
"; $col3 = $col3 . "
"; $col4 = $col4 . "
"; echo $col1 . $col2 . $col3 . $col4; ?> 

首先，我们初始化我们的4列。 然后，对于每个第4个元素（模数），我们将文章添加到右栏中，包含在col-md-12中。 然后，你关闭div然后回应它们。

Answer 4

请在上面的代码中替换此代码

 
 
"; } echo "
"; echo $value[$i]; // column name is article_item echo "
"; } ?>