php while 循环中 bootstrap 列的脚手架

Question

我正在尝试在 bootstrap 网格中动态显示我的 sql 行

<div class="row>
  <div class="col-md-3">sql row 1</div>
  <div class="col-md-3">sql row 2</div>
  <div class="col-md-3">sql row 3</div>
  <div class="col-md-3">sql row 4</div>
</div> 
<div class="row>
  <div class="col-md-3">sql row 5</div>
  <div class="col-md-3">sql row 6</div>
  <div class="col-md-3">sql row 7</div>
  <div class="col-md-3">sql row 8</div>
</div>

我在设置 while 循环时遇到了问题。我现在所做的就是

<div class="row>
  <div class="col-md-3">sql row 1</div>
  <div class="col-md-3">sql row 2</div>
  <div class="col-md-3">sql row 3</div>
  <div class="col-md-3">sql row 4</div>
  <div class="col-md-3">sql row 5</div>
  <div class="col-md-3">sql row 6</div>
  <div class="col-md-3">sql row 7</div>
  <div class="col-md-3">sql row 8</div>
</div>

如何设置循环以自动将四个 col-md-3 类分配给每一行然后继续。当前代码：

<div class="row">
   while($row = $result->fetch_assoc()) 
{
    $spons_amt = round($row["spons_amt"] + 500, 2);
echo '<div class="col-md-3">' . $spons_amt . '</div>'
} 
mysqli_close($conn);
</div>

我猜我需要做的是

    <div class="row">
   while($row = $result->fetch_assoc())
// count number of rows 
{
//list 4 of these (to make a row)
    $spons_amt = round($row["spons_amt"] + 500, 2);
echo '<div class="col-md-3">' . $spons_amt . '</div>'
} 
// echo </div><div class="row"> between every set of 4
mysqli_close($conn);
</div>

我这样做的方式正确吗？我怎样才能完成代码？

Answer 1

尝试这样的事情：

$n = 0;
echo '<div class="row">';
while($row = $result->fetch_assoc()) 
{
    $spons_amt = round($row["spons_amt"] + 500, 2);
    if($n%4 == && $n =! 0) { 
        echo '</div>';
        echo '<div class="row">';
        echo '<div class="col-md-3">' . $spons_amt . '</div>';
        $n = 1;
    } else {
        echo '<div class="col-md-3">' . $spons_amt . '</div>';
        $n++;
    }
} 
echo '</div>';

Answer 2

最优雅的解决方案是使用PHP的array_chunk函数：

 foreach(array_chunk($entries, 4) as $entriesRow) {
     echo '<div class="row">';
         foreach ($entriesRow as $entry) {
             echo "<div class='col-md-3'>$entry</div>";
         }
     echo '</div>';
 }

（假设您已经获取了 $entries 数组中的所有数据库行。）

Answer 3

不需要那么复杂。 Bootstrap 自动在 12 列网格系统中工作。只要确保你循环并制作 col 大小，以便将其平均除以 12，例如col-md-4.

此示例将自动提供每行 3 个，因为 12 / 4 = 3。只需更新以使用 ECHO 或您需要的任何内容，这只是一个基本概念示例。

<div class="row">
    LOOPCODE
    {
        <div class="col-md-4">
            DATA
        </div>
    }
</div>

php while 循环中 bootstrap 列的脚手架

scaffolding for bootstrap columns in php while loops

php

scaffolding

while-loop

twitter-bootstrap