css - 链接在 bootstrap xs 上不起作用

Question

我重复下面的 div 以使用 bootstrap 3 创建缩略图井网格。问题是 anchor 链接在 xs 上不起作用(按钮或图像链接均无效)，但它们在 sm、md 和LG.

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
  <div class="thumbnail" style="height:520px;">
    <a href="/movies/4539/burnt-offerings-1976"><img src="https://s.ynet.io/assets/images/movies/burnt_offerings_1976/medium-cover.jpg" alt="Burnt Offerings"></a>
    <div class="caption">
      <h5>Burnt Offerings</h5>
      <dl class="dl-horizontal hidden-xs">
        <dt>Year</dt><dd>1976</dd>
        <dt>Rating</dt><dd>6.5</dd>
        <dt>Runtime</dt><dd>1:56</dd>
      </dl>
      <p><a href="/movies/4539/burnt-offerings-1976" class="btn btn-primary btn-sm btn-block">Download</a></p>
    </div>
  </div>
</div>

Answer 1

你的 ul.pager涵盖了 col-xs 上的所有元素因此，为什么没有任何内容是可点击的。

这是一个想法:

在您的 ul.pager 上添加 z-index: 1;在你的 <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 上添加另一个你可以 Hook 的类 <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 item">并做 .item { position: relative; z-index: 2; }