根据每个列单元格的内容调整 Twitter Bootstrap 3.1.1 列行高

Question

使用 PHP，我从 MySQL 数据库中输出一组结果。每个结果（当行获取数组时）都应该显示在专用的 Twitter Bootstrap 列中（col-md-4 或 col-md-3，不管是什么）。

<div class="container">
<div class="row">
<?php
$sql = "SELECT * FROM ....."; 
$query = mysqli_query($connect, $sql) or die (mysqli_error()); 
while ($row = mysqli_fetch_array($query)) { 
$content = $row["content"];
// output
echo '<div class="col-md-3">';
echo $content;
echo '</div>';
}
?>
</div>
</div>

但是，由于我有很多结果，因此创建了很多列，不幸的是 Bootstrap 没有正确对齐这些列。因此，如果我将 6 个结果分成 6 个 col-md-3，则 Bootstrap 在前 3 个结果（显然）之后“创建”了一个新行，但它们非常混乱：

|| Content1 || Content2 || Content3 ||
|| Content1 || Content2 || Content3 ||
|| Content1 || Content2 || --------
|| Content1 || --------    Content6 ||
   --------    Content5 || Content6 ||
|| Content4 || Content5 || Content6 ||
|| Content4 || Content5 || Content6 ||
|| Content4 || Content5 ||
|| Content4 ||

我正在寻找的是：根据每个结果长度调整行高或列高，但分别为每一行调整。它需要为 3 列工作，4、6 等等：

|| Content1 || Content2 || Content3 ||
|| Content1 || Content2 || Content3 ||
|| Content1 || Content2 || -------
|| Content1 || 
   --------    --------    --------
|| Content4 || Content5 || Content6 ||
            || Content5 ||
            || Content5 ||
   --------    --------    --------
|| Content7 || Content8 || Content9 ||
   --------    --------    --------

我需要在 Twitter Bootstrap 3.1.1 CSS 中进行哪些更改？我试过 display:table-cell;其他帖子中建议的方法，但这只会更加混乱（它将所有列添加到无尽的水平行中）

Answer 1

<?php
$sql = "SELECT * FROM ....."; 
$query = mysqli_query($connect, $sql) or die (mysqli_error()); 
while ($row = mysqli_fetch_array($query)) { 
$content = $row["content"];
// output
echo '<div class="col-md-3">';
echo $content;
echo '</div>';
}
?>

到

<?php
    $sql = "SELECT * FROM ....."; 
    $query = mysqli_query($connect, $sql) or die (mysqli_error());
    $count = 1;

    while ($row = mysqli_fetch_array($query)) { 
        $content = $row["content"];
        // output

        if ($count % 3 == 1) {

            echo '<row>';

        }

        echo '<div class="col-md-4">';
        echo $content;
        echo '</div>';

        $count = $count + 1;

        if ($count % 3 == 0) {

            echo '</row>

        }


    }
?>

这可能不是完成它的最佳方法，但它应该可以工作。

基本上 if 语句在那里，所以当计数达到任何余数为 1 时。像 7、10、13 等将开始新行，然后一旦该数字完全可被 3 整除，它将关闭该行。

所以元素 0 - 3 将在 1 行 4 - 7 在另一行上等等。