jquery - 如何制作响应式 Bootstrap 3 分页

Question

这个:

在较小的视口(viewport)上打开这个:

我觉得它看起来很恶心，而且它也占用了很多空间。

这是标准的分页 html:

<div class="container">
       <div class="text-center">
          <ul class="pagination pagination-lg">
             <li><a href="#">&laquo;</a></li>
             <li><a href="#">1</a></li>
             <li><a href="#">2</a></li>
             <li><a href="#">3</a></li>
             <li><a href="#">4</a></li>
             <li><a href="#">5</a></li>
             <li class="disabled"><span>...</span></li>
             <li><a href="#">12</a></li>
             <li><a href="#">13</a></li>
             <li><a href="#">14</a></li>
             <li><a href="#">15</a></li>
             <li><a href="#">16</a></li>
             <li><a href="#">&raquo;</a></li>
          </ul>
       </div>
    </div>

现在，我可以将较小的版本与他们提供的类一起使用，但是一切 - 无论如何 - 都应该对粗手指友好，因为有些触摸设备与桌面设备一样大。

Answer 1

在我看来，切换分页是一个 helper ，但不是最终的解决方案。我找到了一个 Bootstrap 插件，它完全符合我期望在较小屏幕尺寸下分页的功能——它缩小了分页 li block 的数量以匹配屏幕宽度，如下所示:

rPage - responsive bootstrap3 pagination plugin