Question

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

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

产品应在标准计算机屏幕上以4行对齐。目前他们是随机“混乱”。这是与类别视图相关的代码的摘录。

category.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

问题截图：

Layout Issues

Answer 1

将您的col-sm-3（以四人为一组）包裹在不同的行中（带有row类的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;
          } 
        }
        ?>

Answer 2

opencarts clearfix解决方案不能很好地工作。

我的解决方案是......

目录/ 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）的页面在全屏幕上每行4个产品折叠（@media（最小宽度：1200px）），保持在4然后是2然后是1。

如果您更改了opencart以获得类别图像，则可以对类别执行相同操作

Answer 3

要解决此问题，您可以创建自定义类并将其添加到<div class="col-sm-3 custom-width">它将解决所有对齐问题请检查屏幕截图

.custom-width {
width: 20% !important;}

Screenshot

Opencart类别 - 产品布局问题

3 个答案: