PHPとBootsrapを使用してsqlテーブルの行情報を表示

Question

私は製品と呼ばれるSQLテーブルから製品情報（画像、説明、価格...）を表示しようとしています。 私はブートストラップを使用していますし、基本的には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> 

私は基本的にPHPを使用して（以前のHTMLバージョンのように）SQLテーブルからすべての製品を取得し、すべての製品を表示しようとしていますこれは私のPHPコードで、すべての行の4つの製品になります。

<?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

いくつかのコメント：

• コンテナがコンテナであるので、（あなたが本当にそれを必要とする場合）.containerクラスを使用し、ない.row
• すべての.rowニーズが.col子（how to nest columnsを確認してください）、 に.rowを追加することができますが、ツリーはそのようなものです

このコードをコメント訂正でチェックしてください

<?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 
    } 
?>