使用PHP和Bootsrap显示sql表中的行信息

我试图从名为products的sql表中显示产品信息（图片、说明、价格…）。 我使用的是Bootstrap，基本上HTML是这样的：

<!-- ALL THE PRODUCTS-->
    <div class="row">   
                  <!-- ONE PRODUCT IN ONE COLUMN-->
                  <ul class="tutors_nav">
                    <li>
                      <div class="single_tutors col-lg-3 col-md-3 col-sm-3">
                        <!--  PRODUCT PICTURE-->
                        <div class="tutors_thumb">
                          <img src="img/gallery/prod1.jpg" />                      
                        </div>
                    <!--  PRODUCT INFORMATION-->
                        <div class="singTutors_content">
                          <h3 class="tutors_name">HUGO BOSS BOTTLED</h3>
                          <span>Homme</span>
                          <p>8700 DA</p>
                        </div>

                      </div>
                    </li>

                  </ul>


            </div>

雨果老板瓶装
霍姆
8700达卡

我试图从sql表中获取所有产品，然后使用PHP显示每个产品（如以前的html版本），基本上每行有4个产品，这是我的PHP代码：

<?php   
$sql = "SELECT * FROM produits";
    if (!$result = $connection->query($sql)) {
        die ('There was an error running query[' . $connection->error . ']');
    }   


$rows = $result->num_rows;    // Find total rows returned by database
    if($rows > 0) {
        $cols = 4;    // Define number of columns
        $counter = 1;     // Counter used to identify if we need to start or end a row
        $nbsp = $cols - ($rows % $cols);    // Calculate the number of blank columns

        $container_class = 'row';  // Parent container class name
        $row_class = 'row';    // Row class name        
        $col_class = 'single_tutors col-lg-3 col-md-3 col-sm-3'; // Column class name
        $img_class='tutors_thumb';
        $desc_class='tutors_name';


        echo '<div class="'.$container_class.'">';    // Container open
        while ($item = $result->fetch_array()) {
            if(($counter % $cols) == 1) {    // Check if it's new row
                echo '<div class="'.$row_class.'">';    // Start a new row
            }           
                    //one product 
                    $img = $item['imgsrc'];
                    $des=$item['description'];
                    $prix=$item['prix'];
                    $type=$item['type'];

                    /*div class="tutors_thumb">
                      <img src="img/gallery/prod1.jpg" />                      
                    </div>
                    */

                    echo '<div class="'.$img_class.'"><img src='.$img.' alt="test"/></div>';

                    echo '<h3 class='.$desc_class.'>'.$des.'<p>'.$prix.'</p><span> '.$type.'</span></h3>  ';


            if(($counter % $cols) == 0) { // If it's last column in each row then counter remainder will be zero
                echo '</div>';   //  Close the row
            }
            $counter++;    // Increase the counter
        }
        $result->free();
        if($nbsp > 0) { // Adjustment to add unused column in last row if they exist
            for ($i = 0; $i < $nbsp; $i++)  { 
                echo '<div class="'.$col_class.'">&nbsp;</div>';        
            }
            echo '</div>';  // Close the row
        }
        echo '</div>';  // Close the container
    }


?>

---

不幸的是，它在每一行显示一个产品，请如何修复它

对代码的注释很少：

• 容器是一个容器，所以使用

  .container

  类（如果您确实需要它），而不是

  .row

• 每个

  .row

  都需要一个

  .col

  子级（选中），然后您可以将

  .row

  附加到

  .col

  ，但树是这样的

检查带有注释的更正的代码

<?php
    $sql = "SELECT * FROM produits";
    if (!$result = $connection->query($sql)) {
        die ('There was an error running query[' . $connection->error . ']');
    }

    $rows = $result->num_rows;    // Find total rows returned by database
    if($rows > 0) {
        $cols = 4;    // Define number of columns
        $counter = 1;     // Counter used to identify if we need to start or end a row
        $nbsp = $cols - ($rows % $cols);    // Calculate the number of blank columns

        $container_class = 'row';  // Parent container class name
        $row_class = 'row';    // Row class name
        $col_class = 'single_tutors col-lg-3 col-md-3 col-sm-3'; // Column class name
        $img_class='tutors_thumb';
        $desc_class='tutors_name';


        echo '<div class="row"><div class="col-sm-12 col-md-12 col-lg-12">';    // Container open
        while ($item = $result->fetch_array()) {
            if(($counter % $cols) == 1) {    // Check if it's new row
                echo '<div class="'.$row_class.'">';    // Start a new row
            }
            //one product
            $img = $item['imgsrc'];
            $des=$item['description'];
            $prix=$item['prix'];
            $type=$item['type'];

            /*div class="tutors_thumb">
              <img src="img/gallery/prod1.jpg" />
            </div>
            */
            echo '<div class="'.$col_class.'">'; //open column

            echo '<div class="'.$img_class.'"><img src='.$img.' alt="test"/></div>';

            echo '<h3 class='.$desc_class.'>'.$des.'<p>'.$prix.'</p><span> '.$type.'</span></h3>  ';

            echo '</div>'; //close column

            if(($counter % $cols) == 0) { // If it's last column in each row then counter remainder will be zero
                echo '</div>';   //  Close the row
            }
            $counter++;    // Increase the counter
        }
        if(($counter % $cols) != 0) { // close .row if you actually have less than $cols columns printed
            echo '</div>';
        }
        /*
         * You don't need to fill missing columns, existing ones will be automatically pulled left
         * 
         * $result->free();
        if($nbsp > 0) { // Adjustment to add unused column in last row if they exist
            for ($i = 0; $i < $nbsp; $i++)  {
                echo '<div class="'.$col_class.'">&nbsp;</div>';
            }
            echo '</div>';  // Close the row
        }*/
        echo '</div></div>';  // Close the container
    }
?>

检查工作原理。您没有以正确的方式嵌套它们。请在一个小提琴上张贴你的HTML，以便有人能纠正它，并以正确的方式展示你的想法