Bootstrap 4 分页缩放/响应能力

Question

我现在用的分页组件的引导4作为解释在这里。

我能够根据需要成功浏览我的页面，但是我注意到导航按钮似乎没有像我预期的那样响应屏幕尺寸的变化。例如，我目前正在处理 16 个页面，当我在移动设备上查看此页面或将浏览器调整为较小尺寸时，我只能看到第 4 页到第 14 页的页面按钮。我想我希望这些按钮按比例缩小为页面宽度减少了，但这似乎没有发生。

细节：

• 我已经根据 Bootstrap 的需要为视口添加了元标记。
• 我正在使用容器 div 来包含我的分页列表。
• 我正在使用 Bootstrap CDN，但它正在正确加载。
• 我没有包含代码示例，因为我遵循 Bootstrap 示例到 T。

谢谢你的帮助 ：）

Answer 1

根据场景，一个巧妙的技巧是 flex 帮助类 .flex-wrap 与 .pagination 一起让您的列表为较小的设备分成多行。

<ul class="pagination flex-wrap">
    <li class="page-item"><a class="page-link" href="#">A</a></li>
    <li class="page-item"><a class="page-link" href="#">B</a></li>
    ...
    <li class="page-item"><a class="page-link" href="#">Z</a></li>
</ul>

当您没有太多页面并希望它们全部可见而无需滚动等时，这很有用。

Answer 2

引导程序 Pagination组件没有任何类型的智能、响应式行为（如网格）。因此，当我们谈论您所描述的行为时……正如预期的那样。

那么问题就变成了如何解决这个缺点？按照您的建议缩小按钮似乎是个好主意；但是如果你有 100 页呢？如果它必须缩放以在一行中容纳所有 100 个按钮，那么这些按钮将非常小。

所以你有几种方法被烘焙到 Bootstrap 的Pagination组件中：

• 用Prev和Next按钮显示 X 页码。
• 以上，但有一个...空格表示还有额外的页面

或者您可以Pagination使用一个简单的包装类来调整组件本身的行为：.table-responsive

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<nav aria-label="Page navigation example" class="table-responsive mb-2">
  <ul class="pagination mb-0">
    <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">6</a></li>
    <li class="page-item"><a class="page-link" href="#">7</a></li>
    <li class="page-item"><a class="page-link" href="#">8</a></li>
    <li class="page-item"><a class="page-link" href="#">9</a></li>
    <li class="page-item"><a class="page-link" href="#">10</a></li>
    <li class="page-item"><a class="page-link" href="#">11</a></li>
    <li class="page-item"><a class="page-link" href="#">12</a></li>
    <li class="page-item"><a class="page-link" href="#">13</a></li>
    <li class="page-item"><a class="page-link" href="#">14</a></li>
    <li class="page-item"><a class="page-link" href="#">15</a></li>
    <li class="page-item"><a class="page-link" href="#">16</a></li>
    <li class="page-item"><a class="page-link" href="#">17</a></li>
    <li class="page-item"><a class="page-link" href="#">18</a></li>
    <li class="page-item"><a class="page-link" href="#">19</a></li>
    <li class="page-item"><a class="page-link" href="#">20</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

[ More Content Here ]

该.table-responsive课程旨在与<table>并允许移动水平滚动条时，否则将超出屏幕宽度的100％......但它完美罚款这里，如果你想将所有可能的选项分页提供一点实用的。

我希望你能理解……这是丑陋的用户体验。这就是为什么这么多分页模式遵循上述要点的原因。