帖子链接在 768px 下不起作用答案

【问题标题】：Post Links are not working on under 768px帖子链接在 768px 下不起作用
【发布时间】：2015-08-07 11:49:20
【问题描述】：

该网站是http://www.mercuriusresearch.co.uk，它在Wordpress 上运行并基于Bootstrap。

当您将屏幕大小调整到 768 像素以下时，该错误显示，所有帖子标题链接都停止工作。实际的HTML 仍然显示href，但帖子标题的行为与普通文本一样。

该错误显示在整个网站上（即所有帖子标题链接上），但仅显示在从 Wordpress 获取链接的页面部分上。例如，我主页上的侧边栏链接适用于所有屏幕尺寸。

我以前没有遇到过这个问题。根据上一段，我的怀疑是它与Wordpress 以某种方式相关......但我使用的代码与我一直用来从Wordpress 引入标题的代码相同。因此，错误似乎与屏幕大小有关，这让我认为Bootstrap 也有某种相关性。

任何帮助将不胜感激。

网站上唯一没有的代码是 Wordpress 循环：

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<div class="post-date">
    <?php k99_relative_time(); ?>
</div>  
<div class="post-title">
    <?php the_title( sprintf( '<h3 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h3>' ); ?>
</div>

<div class="post-excerpt">
    <?php the_excerpt(); ?>
</div>
<div class="read-more">
    <a href="<?php the_permalink() ?>">Read more &#8594;</a>
</div>

</article>

不过，正如我所说，这适用于更大的屏幕尺寸，如果这部分有问题，显然会出现在所有屏幕尺寸上。所有其他代码都在网站上（显然，我不确定哪一部分是相关的，否则我不会遇到这个问题）。

【问题讨论】：

任何示例代码或 sn-p 将不胜感激。

标签： php html css wordpress twitter-bootstrap

【解决方案1】：

为了快速解决问题，您可以在768px 下方使用media query 为devices 编写CSS，您的链接将正常工作。

#latest-news-front, 
#stock-ideas-front {
    position: relative;
    z-index: 10;
}

【讨论】：

太棒了。现在工作。你知道是什么原因造成的吗？在我看来，z-index 部分正在修复故障，所以...Bootstrap？

【解决方案2】：

有一个 div 涵盖了您使用的所有其他 div。如果您查看元素检查器，您可以看到 div。

您可以浮动侧边栏前面的 div，但有一个变化是其他 div 的行为会有所不同。

aside#sidebar-front {
float: left;
}

或在每个 div 的末尾使用以下代码清除每个 div。

clear: both;

【讨论】：