在 Bootstrap 响应视图中，只有图像链接的角落是可点击的答案

【问题标题】：Only Corner Of Image Link Is Clickable In Bootstrap Responsive View在 Bootstrap 响应视图中，只有图像链接的角落是可点击的
【发布时间】：2017-02-04 13:27:08
【问题描述】：

我在这里不知所措。从桌面查看我的图片库，一切都像魅力一样。但是，当我从手机查看它以测试响应能力时，我的图片链接只能在右上角单击。我更改了浏览器（桌面）的分辨率并得到了相同的结果。我所有的画廊 CSS 都是标准的引导 CSS。

这是我可以在响应式视图中单击的大致区域的视觉效果：

当我检查我的源代码时，我的超链接覆盖了我的图像：

还有我的图片链接的标记：

<div class="col-lg-3 col-md-4 col-xs-6">
 <a class="thumbnail" href="http://example.com/h/500/w/800/a/c/thumb/img/gallery/18FT_Wide_Oil_Filters_2014/18_wide_oil_3.jpg" data-toggle="lightbox" data-gallery="18FT Wide Oil Filters 2014" data-title="18FT Wide Oil Filters 2014">
  <img class="img-responsive img-protected" src="http://example.com/h/250/w/400/a/c/thumb/img/gallery/18FT_Wide_Oil_Filters_2014/18_wide_oil_3.jpg" alt="18FT Wide Oil Filters 2014">
 </a>
</div>

这是我整个画廊页面的Bootply。如果您将页面大小调整为每列只有 2 个图像，那么您将获得与我相同的结果。

【问题讨论】：

标签： android jquery html css twitter-bootstrap

【解决方案1】：

改变你的这个 div

<div class="col-lg-12">
         <h4 class="page-header"><span class="glyphicon glyphicon-picture"></span> Wind Tower Hubs 2014</h4>
</div>

到

<div class="col-xs-12 thumb">
             <h4 class="page-header"><span class="glyphicon glyphicon-picture"></span> Wind Tower Hubs 2014</h4>
 </div>

【讨论】：

有点用。在较小的屏幕上，它们不可点击，但布局被破坏，将标题放在图像旁边而不是上方。