在移动版网站中禁用链接

Question

我正在使用Bootstrap作为此网站的模板，www.ifgedmonton.org桌面版本上的一切正常，但在移动版本中，除导航之外的所有链接都不起作用。我通过W3C Validator运行代码，并修复了导致此问题的可能候选者。我还查看了有关此问题的其他建议（here，here，here和here），但它们对我不起作用。要复制，请在移动设备上打开网站或使浏览器窗口足够小，以便呈现移动版本。下面的屏幕截图显示了我所指的链接。

Answer 1

由于此原因，您的补充工具栏与您的内容重叠

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float:left; }

关于移动设备的媒体查询

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float:none; }

您将能够再次选择您的文字和链接

Answer 2

你的问题是：

<script src="http://www.ifgedmonton.org/assets/libs/boostrap/js/bootstrap.min.js"></script>

不拉文件

检查所有链接是否也引导css和js文件。

Answer 3

第一个解决方案

更改此

<div class="col-sm-3" id="sidebar" role="navigation"></div>

到此

<div class="col-xs-12 col-sm-3" id="sidebar" role="navigation"></div>

这会将您的侧边栏放在底部

或者

将其更改为此

<div class="col-sm-3 hidden-xs" id="sidebar" role="navigation"></div>

这会隐藏您的侧边栏

Answer 4

从它的外观来看，它不是移动版本。它正在被压扁。当它落到下面时，右栏会打破链接。我会考虑获得一个真正的移动模板。以下是演练：http://www.sitepoint.com/build-a-responsive-mobile-friendly-website-from-scratch-dive-into-the-code/

Answer 5

您的侧栏div位于您的主要内容之上。您可以使用正确的CSS修复此问题，或在它们之间添加清除div。

<style>
    .clear { clear: both; }
</style>

<div class="clear"></div>