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>