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，则会创建一个新行＆＃34;＆＃34;通过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中进行哪些更改？我试过了显示器：table-cell;在其他帖子中建议的方法，但只会混淆它（它将所有的colums添加到无尽的水平行）

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

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

1 个答案: