我使用Bootstrap作为这个网站的模板，www.ifgedmonton.org在桌面版上一切正常，但在移动版中，除了导航之外的所有链接都不起作用。我已经通过W3C Validator 运行了代码，并修复了导致此问题的可能候选者。我还查看了有关此的其他建议（here、here、here 和 here），但它们对我不起作用。要复制，请在移动设备上打开网站或将浏览器窗口设置得足够小，以便呈现移动版本。下面的屏幕截图显示了我所指的链接。
【问题讨论】：
标签： jquery html css twitter-bootstrap
因此，您的侧边栏与您的内容重叠
.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;
}
您将能够再次选择您的文本和链接
【讨论】：
第一个解决方案
改变这个
<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>
这将隐藏你的侧边栏
【讨论】：
你的问题是这样的：
<script src="http://www.ifgedmonton.org/assets/libs/boostrap/js/bootstrap.min.js"></script>
不拉文件
检查你所有的链接也引导 css 和 js 文件。
【讨论】：
boostrap，而不是bootstrap！尽管如此，原来的问题仍然存在
从外观上看，它不是移动版本。它只是被压扁了。右栏下降到下方时，会断开链接。我会考虑获得一个真正的移动模板。这是一个演练：http://www.sitepoint.com/build-a-responsive-mobile-friendly-website-from-scratch-dive-into-the-code/
【讨论】：
您的侧边栏 div 位于您的主要内容之上。您可以使用正确的 css 来解决此问题，或者在它们之间添加一个清除 div。
<style>
.clear { clear: both; }
</style>
<div class="clear"></div>
【讨论】：