Web链接无法在移动显示屏上运行

Question

我使用基于网格的示例引导模板开发了我的投资组合网站。 编码后，我尝试测试移动设备上的超链接。但链接在移动显示屏上不起作用。

我尝试了一些在线发现的建议解决方案。但到目前为止没有运气。任何人都可以帮我找到问题吗？请。

投资组合链接：https://pruthvirajn.github.io/

有问题的页面：联系页面（主页中的右上菜单选项）

链接无效：推特按钮，谷歌+按钮和投资组合中的其余超链接。

Answer 1

如下所示，col-lg-12 text-center覆盖了链接，因此当您尝试点击该链接时，实际上是在点击h2.project-title的容器。

要解决此问题，请添加此CSS：

.contact col-lg-12.text-center {
  pointer-events: none;
}

这允许用户点击容器和链接。 More info on pointer-events

或：

.contact col-lg-12.text-center {
  display: inline-block;
  width: 100%;
}

这使得容器只有标题高，允许您单击。

Answer 2

您正在使用Bootstrap，因此您可以通过添加类来使用类来集中其链接，希望它可以正常工作<a target="_blank" href="https://twitter.com/PruthvirajNGS" class="btn-social btn-outline text-center"><i class="fa fa-fw fa-twitter"></i></a>