android - 在 Bootstrap 响应式 View 中只有图片链接的一 Angular 是可点击的

Question

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

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

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

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

<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 张图片，那么您将得到与我相同的结果。

Answer 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>