如何解决链接无法在带有 woocommerce 侧边栏的移动设备上运行的问题？答案

【问题标题】：How do I solve problem with links not working on mobile with woocommerce sidebar on?如何解决链接无法在带有 woocommerce 侧边栏的移动设备上运行的问题？
【发布时间】：2020-07-31 12:20:18
【问题描述】：

我正在为一个客户构建这个网站，一切都很顺利，直到我在我的商店和产品页面上添加了一个 woocommerce 侧边栏小部件。既然我这样做了，产品链接就无法在移动设备上点击。

我尝试停用一些插件，但没有任何效果。移动版没有侧边栏也能正常使用，带侧边栏根本不行。

谁能帮帮我？我已经失去理智了……

我使用的主题是 Insomnia https://themeforest.net/item/insomnia-beautiful-and-modern-creative-wordpress-theme/16256975?gclid=CjwKCAjwp-X0BRAFEiwAheRuiyVZe2FxLFL9bCVPf7qCjQX9CG715ewHddt3B44EBubBcEPaxSH6zhoCUbAQAvD_BwE

提前致谢

我需要帮助的页面：https://fiordilatte.pt/index.php/loja/

【问题讨论】：

添加显示：无；通过 .col-lg-3 的 CSS 媒体查询（小于 768px）这解决了问题

标签： css wordpress woocommerce sidebar

【解决方案1】：

这里发生的情况是侧边栏与移动视图上的主要内容重叠。这就是链接不可点击的原因 - 您试图点击位于链接顶部的不可见元素。

原因是尽管您在 .sidebar-right 上使用了网格类 .col-sm-12，但它也设置为 float:left，这将使其脱离正常流程。然后，当您在之后的元素上使用 .col-sm-12 时，它认为它自己获得了整个宽度 - 这也是它没有正确换行的原因。

一个简单的解决方案，但不是一个非常优雅的解决方案，就是使用 z-index 属性强制将 .sidebar-right 放在顶部。请参阅下面的示例：

.sidebar-right {
    z-index: 999;
}

【讨论】：