修复 WooCommerce 商店页面行答案

【问题标题】：Fix WooCommerce Shop page rows修复 WooCommerce 商店页面行
【发布时间】：2017-12-16 10:09:34
【问题描述】：

在平板电脑和手机横向模式下的商店页面上，并非所有产品都彼此相邻显示。它们会留下空隙，因此有时会出现两种产品，有时会连续出现一种产品。我尝试使用 CSS 并找不到解决方案。我的目标是让它们彼此相邻，并在纵向手机上连续显示至少 2 个，而不是一个。我该怎么做？

如果您在电脑屏幕上打开网站，只需将浏览器窗口缩小即可看到）

【问题讨论】：

【解决方案1】：

您将产品宽度设置为 50% + 边距。这不仅仅是屏幕的宽度。在横向上你有这个

@media (max-width: 767px) and (min-width: 560px)
    .theme__product__item--col__3:nth-child(3n) {
        margin-right: 15px;
}

将其更改为 0px

或将 50% 更改为更低的值。例如 46%。

@media (max-width: 767px) and (min-width: 560px)
.theme__product__item--col__3 {
    width: calc(50% - 7.5px);        
}

【讨论】：

【解决方案2】：

我认为你应该将 margin-right 设置为 10

@media (max-width: 767px) and (min-width: 560px)

.theme__product__item--col__3 {`

    width: calc(45% - 7.5px);        
}

【讨论】：

【解决方案3】：

我认为这将解决问题。将 margin-right 设置为 0

 @media (max-width: 992px) and (min-width: 768px)
 {
   .theme__product__item--col__3:nth-child(3n) {
      margin-right: 0;
    }
 }

【讨论】：