php - Opencart 类别 - 产品布局问题

Question

我在 Opencart CMS 平台上的类别 View 中的产品布局有点困难。

我已经暂时删除了我所有的 css 覆盖，以检查这不是问题的原因。我使用的是在商店设置中设置的正确图像尺寸，如果它们被放大，它们都会保持正确的纵横比。

产品将在标准计算机屏幕上以 4 行排列。目前，它们是随机“困惑”的。这是与类别 View 相关的代码摘录。

• 类别.tpl Fiddle here!

• nico_product.tpl Fiddle here!

      $category_page_products_row = nico_get_config('category_page_products_row');
      if (empty($category_page_products_row)) $category_page_products_row = 3;
  
      include($nico_include_path . '/template/module/nico_product.tpl');
      foreach ($products as $product) { ?>
      <div class="col-md-<?php echo $category_page_products_row;?>">
          <?php nico_product($product);?>
      </div>
      <?php } ?>
  </div>
  

出现我的问题的网站是 HERE!

该网站正在运行 php 5.5.18 和 OC 1.5.6.4

问题截图:

Answer 1

将您的col-sm-3(四个一组)包裹在单独的行中(div with class row)

标记应该看起来像

        <div class ="row">
            <div class ="col-sm-3">...</div>
            <div class ="col-sm-3">...</div>
            <div class ="col-sm-3">...</div>
            <div class ="col-sm-3">...</div>
        </div> 

        <div class ="row">
            <div class ="col-sm-3">...</div>
            <div class ="col-sm-3">...</div>
            <div class ="col-sm-3">...</div>
            <div class ="col-sm-3">...</div>
        </div> 

以下 PHP 代码应该可以生成此类标记。

        $i = 0;
        foreach ($products as $product) {
          if ( $i == 0 ) {
            echo "<div class='row'>";
          }
        ?>
        <div class="col-md-<?php echo $category_page_products_row;?>">
            <?php nico_product($product);?>
        </div>
        <?php 
          $i++;
          if ( $i == 12/$category_page_products_row ) {
            echo "</div>";
            $i = 0;
          } 
        }
        ?>