Php Opencart类别-产品布局问题

在Opencart CMS平台上，我在类别视图中的产品布局有点困难

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

产品将在标准计算机屏幕上按4行对齐。目前，他们是随机“糊涂”的。这是与category视图相关的代码摘录

• 第三方物流
• 尼科产品有限公司

  $category_page_products_row=nico_get_config（'category_page_products_row'）；
  如果（空（$category\u page\u products\u row））$category\u page\u products\u row=3；
  include（$nico_include_path.'/template/module/nico_product.tpl'）；
  foreach（$products as$product）{？>
  将您的
  col-sm-3
  （四人一组）包装成单独的行（带class
  行的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> 
  
          <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;
            } 
          }
          ?>
  
  $i=0；
  foreach（$products as$product）{
  如果（$i==0）{
  回声“；
  }
  ?>
  要解决此问题，您可以创建一个自定义类并将其添加到
  中。它将解决所有对齐问题。请查看屏幕截图
  
  .custom-width {
  width: 20% !important;}
  
  opencarts clearfix解决方案并没有像现在这样好用
  
  我的解决办法是
  
  在catalog/view/javascript/common.js中
  
  删除与清除修复有关的所有内容（在//添加清除修复后）
  并将其替换为
  
  cols1 = $('#column-right, #column-left').length;
  
  if (cols1 == 2) {
    $('#content .product-layout').parent('.row').addClass('type2');
  } else if (cols1 == 1) {
    $('#content .product-layout').parent('.row').addClass('type1');
  } else {
    $('#content .product-layout').parent('.row').addClass('type0');
  }
  
  这会告诉css您是否使用带有侧栏的布局
  
  然后在stylesheet.css中添加
  
  @media (max-width: 768px) {
    .product-layout:nth-of-type(1n+2) {
      clear: left;
    }
  }
  @media (min-width: 768px) and (max-width: 991px) {
    .product-layout:nth-of-type(2n+3) {
      clear: left;
    }
  }
  @media (min-width: 992px) and (max-width: 1199px) {
    .type1 .product-layout:nth-of-type(3n+4) {
      clear: left;
    }
    .type0 .product-layout:nth-of-type(4n+5) {
      clear: left;
    }
  }
  @media (min-width: 1200px) {
    .type1 .product-layout:nth-of-type(3n+4) {
      clear: left;
    }
    .type0 .product-layout:nth-of-type(4n+5) {
      clear: left;
    }
  }
  
  这将需要一些修改/整理，具体取决于每个屏幕大小显示的产品数量和边栏数量
  
  基本上，一个有0个边栏（.type0）的页面在全屏（@media（最小宽度：1200px））下从每行4个产品折叠，保持在4，然后是2，然后是1
  
  如果您已将opencart更改为具有类别图像，则可以对类别执行相同操作。
  将每行产品包含在单独的
  中……我尝试过此方法，但没有解决方案。每个产品都包含在单独的
  中。对不起，输入错误-每行产品都应包含在
  中。同样，
  class=“row”
  。如果一行中有4个产品，那么这4个
  都应该在一个
  中。对于每一行产品…明白了吗？这是我忽略的一点！但是我注意到，在使用bootstrap 3的官方OC 2.0演示中，每行后面都有以下内容：
  。它们没有新的
  行
  >每4个产品一次。好的，那么clearfix div的使用也应该对你有帮助；-）我明白你的意思。是的，目前，标记是
  col-sm-3
  中的所有产品，没有每4行分隔。你个人知道如何更改此php代码来做到这一点吗？啊哈，你完全正确！！这就做到了。.我稍微修改了一下fy使其适应主题设置中的更改，但非常感谢。我编辑了您的答案以反映我的最终更改。我的结果与您的屏幕截图相同。但是，尝试对珠宝页面使用相同的方法：它不起作用。优秀的解决方案@jonF
  @media (max-width: 768px) {
    .product-layout:nth-of-type(1n+2) {
      clear: left;
    }
  }
  @media (min-width: 768px) and (max-width: 991px) {
    .product-layout:nth-of-type(2n+3) {
      clear: left;
    }
  }
  @media (min-width: 992px) and (max-width: 1199px) {
    .type1 .product-layout:nth-of-type(3n+4) {
      clear: left;
    }
    .type0 .product-layout:nth-of-type(4n+5) {
      clear: left;
    }
  }
  @media (min-width: 1200px) {
    .type1 .product-layout:nth-of-type(3n+4) {
      clear: left;
    }
    .type0 .product-layout:nth-of-type(4n+5) {
      clear: left;
    }
  }