Mysql結果沒有正確對齊

Question

我有一個bootstrap購物車，我正在嘗試添加到我的網站，問題在於表單的第一行完美（四行到一行），但第二行分裂其結果，兩個一條線在另一條線上。

我可以得到的結果顯示兩行完美沒有任何錯誤。但我似乎無法得到正確的四列結果。

到該網站的鏈接可以在這裏找到http://www.deli-box.co.uk/deli6.php

HTML & PHP在Web頁面

<section class="products" data-image=""> 

<?php 
// 
// Show Product Grid 
// 
if (isset($_GET['category'])) { 
    $category = $_GET['category']; 
} else { 
    $category = 1; 
} // list category from table bsc_category 
$shoppingcart_vertical = 0; // if the is vertical shoppingcart_vertical=1/is top or bottom are horitzontal -> shoppingcart_vertical=0 
$_SESSION['LastProductPage'] = $_SERVER["REQUEST_URI"]; // take the name of this page for return 
include "BootstrapShoppingCart/products_grid.php"; // list products 
// 
// Show Product Grid 
// 
?>     

</section> 

下面的代碼是形成的結果，是對內容的一部分的部分產品網格頁面。我已經離開sooe code，但這只是查詢，並不認爲它有任何影響。

<div class=".col-md-3" data-id="<?php echo $thisproduct[0] ['id_product']; ?>" data-type="<?php 
if (count($thisproduct)>1) { 
    echo 'select'; // are selection/type? 
} 
?>" data-quantity="1"> 
    <div class="thumbnail"> 
     <img src="assets/<?php echo $thisproduct[0]['img']; ?>" alt="<?php echo $thisproduct[0]['name']; ?>" class="img-responsive"> 
     <div class="caption"> 
      <p> 
       <?php 
       echo $thisproduct[0]['name'] . "<br />"; // display name product   
       $price = new getprice($rs['id'], 0); // first its id->product second id->type 
       $price_array = $price->get(); // getting price [0] = no offer price [1]= offer price 

       if (count($thisproduct)==1) { // its only 1 product or ... have types ? 
        if ($thisproduct[0]['price'] > 0) { // have price ? 
         if ($thisproduct[0]['offer']) { // this a offer ? 
          echo '<span class="price_overline">' . moneyformat($thisproduct[0]['price']) . '</span>'; 
          echo '<span class="offer"> ' . moneyformat($thisproduct[0]['price_offer']) . '</span>'; 
         } else { 
          echo '<span class="price">' . moneyformat($thisproduct[0]['price']) . '</span>'; 
         } 
        } else { 
         echo '<span class="price">&nbsp;</span>'; // are price 0 then 
        } 
       } else { 
        echo '<span class="offer">&nbsp;</span>'; 
       } 
       ?> 

      </p> 
      <?php 
      if (count($thisproduct)>1) { 
       ?> 
       <select class="form-control combobox_type" style="margin-bottom: 6px;"> 
        <option value="select" selected>Select ...</option> 
        <?php foreach ($thisproduct as $type) { 
         if ($type['id_type']>0) { 
         ?> 
         <option value="<?php echo $type['id_type']; ?>"><?php 
         echo $type['name_type']. ' '; 
         // its type w price ?                 
         // display price type ... like iphone 16gb/32gb/64/gb 
         if ($type['offer']) { // this a offer ? 
          echo '<span class="price_overline">' . moneyformat($type['price']) . '</span>'; 
          echo '<span class="offer"> ' . moneyformat($type['price_offer']) . '</span>'; 
         } else { 
          echo '<span class="price">' . moneyformat($type['price']) . '</span>'; 
         } 
         ?></option> 
         <?php } // foreach types 
         } // its a type? ?> 
       </select> 
       <?php 
      } else { // options 
       echo '<div style="height: 40px;"></div>'; // i make a offset 
      } 
      ?> 

      <p align="center"> 
       <?php if ($shoppingcart_vertical) { ?> 
        <a href="#" class="btn btn-success addproduct"><i class="icon-shopping-cart"></i>Add</a> 
       <?php } else { ?> 
        <a href="#" class="btn btn-success addproduct-horizontal"><i class="icon-shopping-cart"></i>Add</a> 
       <?php } ?> 
      </p> 
     </div> 
    </div> 
</div> 

Answer 1

對於初學者來說，它看起來像你在你的HTML代碼中的第一行（ <div class=".col-md-3"應該是 <div class="col-md-3"）類屬性有一個額外的 .。

嘗試糾正這一點，看看你得到更好的結果...

嘗試在<div class="row">標籤包裝的每一行。 Bootstrap會自動爲每個類添加填充，並且很可能每個元素上的這一點額外填充都會拋出對齊。 <div class="row">將對付添加的填充，並且元素應該正確排列。

您應該結束了一個行/列結構看起來是這樣的：

<div class="row"> 
    <div class="col-md-3">Content</div> 
    <div class="col-md-3">Content</div> 
    <div class="col-md-3">Content</div> 
    <div class="col-md-3">Content</div> 
</div> 
<div class="row"> 
    <div class="col-md-3">Content</div> 
    <div class="col-md-3">Content</div> 
    <div class="col-md-3">Content</div> 
    <div class="col-md-3">Content</div> 
</div> 
<div class="row"> 
    <div class="col-md-3">Content</div> 
    <div class="col-md-3">Content</div> 
    <div class="col-md-3">Content</div> 
    <div class="col-md-3">Content</div> 
</div>