未占用完整图像大小的图像的 href 链接答案

【问题标题】：a href link of an image not taking up full image size未占用完整图像大小的图像的 href 链接
【发布时间】：2015-07-04 03:15:28
【问题描述】：

我在索引页面上设置了 3 个迷你功能，但无论出于何种原因，这些链接仅显示在桌面版图像的顶部 20% 上。在移动设备上，可链接区域非常好。该网站的核心正在运行 Bootstrap。

  <a href="courses.php" class="col-sm-4 fade-in two">
    <img src="images/Mini-Features/Book-Your-Private-Lesson.jpg" 
      alt="Start your private lessons, Book a class today with Universal Ballroom" 
      title="Start your private lessons, Book a class today with Universal Ballroom" class="img-responsive"> 
  </a>   

  <a href="courses.php" class="col-sm-4 fade-in two">
    <img src="images/Mini-Features/Upcoming-Studio-Party.jpg" 
      alt="Upcoming Event: April 14th, Studio Party at Universal Ballroom in Argyle Illinois"
      title="Upcoming Event: April 14th, Studio Parth at Universal Ballroom in Argyle Illinois" class="img-responsive">   
  </a>

  <a href="courses.php" class="col-sm-4 fade-in two">
    <img src="images/Mini-Features/New-Class-Schedule.jpg"
      alt="Get the April Class Schedule, Click here."
      title="Get the April Class Schedule, Click here." class="img-responsive">     
  </a>

这是该网站当前开发版本的链接：

http://sandbox.graphics/Development/universal-ballroom/index.php

【问题讨论】：

不要链接到您网站的“当前开发版本” - 这可能会发生变化，因此该链接将不再有用。如果你想分享一个演示，你应该使用 jsFiddle 之类的东西，或者内置的 Stack Snippets。

标签： html twitter-bootstrap hyperlink href

【解决方案1】：

如果您使用开发人员工具检查图像，您会发现另一个元素 (div.row) 在您的图像前面。

通过应用较高的z-index-value，您可以将图像放在其他元素 (div.row) 的前面，并且链接将作用于整个图像

CSS

a.col-sm-4.fade-in.two {
      z-index: 10000;
}

【讨论】：

【解决方案2】：

尝试改变

<div style="margin:20px 0px;">

到

<div class="row" style="margin:20px 0px;">

Chrome 的开发工具是了解此处实际情况的绝佳资源。另一个简单的解决方法可能是简单地将 z-index 应用于时髦的 a 元素。

【讨论】：

太棒了。磕头谢谢！
没问题！我这么快发现它的唯一原因是因为我过去对同样的问题感到沮丧。很高兴帮助:)