Question

我在索引页面上设置了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

Answer 1

如果您使用“制作工具”检查图像，则会发现另一个元素（div.row）位于图像前面。

通过应用高z-index - 值，您可以将图像放在另一个元素（div.row）的前面，该链接将在整个图像上工作

<强> CSS

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

Answer 2

尝试更改

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

到

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

Chrome浏览器的开发工具是了解这里实际情况的重要资源。另一个简单的修复可能是简单地将z-index应用于时髦元素。

图像的href链接不占用完整图像大小

2 个答案: