Mysqlの結果が正しく整列していません

Question

私は自分のウェブサイトに追加しようとしているブートストラップのショッピングカートを持っていますが、問題はフォームの最初の行が完全に（4行に）もう一方の行は2行です。

1行に2つのエラーを完全に表示するように結果を得ることができます。しかし、私はちょうど結果が4つの列に対して正しく形成されるように見えることはできません。

ウェブサイトへのリンクは、Webページで、ここでhttp://www.deli-box.co.uk/deli6.php

HTML & PHP

<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のコードを残しましたが、これは単なるクエリであり、それが何らかの影響を与えているとは考えていません。手始めに

<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

あなたは（ <div class=".col-md-3"が <div class="col-md-3"する必要があります）あなたのHTMLコードの非常に最初の行に、クラス属性に余分 .を持っているように見えます。

は

は<div class="row">タグ内の各行をラップ試してみてください...これを修正してみて、あなたがより良い結果を得るかどうかを確認します。ブートストラップは各col-*-*クラスに自動的にパディングを追加し、各要素の余分なパディングのわずかな部分がアライメントをスローしている可能性があります。 <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>