Question

我正在使用Bootstrap 4中的分页组件，如here所述。

我能够根据需要成功浏览我的页面，但是我注意到导航按钮似乎没有像我预期的那样响应屏幕大小的变化。例如，我目前正在处理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

Bootstrap的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％......但它在这里提供了一点点如果要包含所有可能的分页选项，请使用实用程序。

我希望你能欣赏......这是丑陋的用户体验。这就是为什么如此多的分页模式遵循上述要点。

Answer 3

如果您有兴趣，在我的网络应用程序中，我使用导航标记围绕onDismissListener，使用CSS类作为水平滚动条。

<ul>

小提琴演示：https://jsfiddle.net/JonathanParentLevesque/z4gL1wkb/5/

这个的最小CSS将是：

<nav class="HORIZONTAL_SCROLL_NAV">

如果要设置滚动条的样式，也可以添加一些额外的CSS（这些浏览器支持：https://caniuse.com/#feat=css-scrollbar）：

.HORIZONTAL_SCROLL_NAV {

    -webkit-overflow-scrolling: touch;

    overflow-x: auto;
    overflow-y: hidden; 
}

.HORIZONTAL_SCROLL_NAV>ul {

    margin: 0 auto;
}

Answer 4

您可以使用.pagination-sm .pagination-lg

   <nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>

Answer 5

对 Dario Muñoz 的回答进行了一些改进：

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

要使分页看起来不错，您还需要调整 scss：该示例是硬编码的，但应该可以从引导程序的变量文件中获取变量。

.flex-wrap.pagination{
  margin-left: 3px;
  .page-item {
    margin-bottom: 5px;
  }

  .page-item:first-child{
    margin-left: -3px;
  }
}

Bootstrap 4分页缩放/响应

5 个答案: