使用 PHP 和 Bootstrap 从 sql 表中显示行信息

Question

我正在尝试从名为 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>

我正在尝试从 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
    }


?>

不幸的是，它每行都显示一个产品，请问如何解决这个问题！

Answer 1

您的代码很少有 cmets：

• 容器就是容器，所以使用.container类（如果你真的需要的话），而不是.row
• 每个.row 都需要一个.col 孩子（检查how to nest columns），然后您可以将.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
    }
?>