Bootstrap 4分页缩放/响应式设计

Question

我在使用Bootstrap 4中的分页组件，参考链接https://getbootstrap.com/docs/4.1/components/pagination/.

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

详情:

• 我已添加视口元标签，如Bootstrap所需。
• 我使用容器div来包含我的分页列表。
• 我正在使用Bootstrap CDN，但它正在正确加载。
• 我没有包含代码示例，因为我完全遵循了Bootstrap的示例。

谢谢您的帮助 :)

- user3657152

Answer 1

根据不同的情况，一个简便的技巧是使用.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>

当您的页面不太多且希望它们全部可见而无需滚动等操作时，这非常有用。

- Dario Muñoz

Answer 2

Bootstrap的“分页(Pagination)”组件并没有类似于网格(Grid)那样智能、响应式的行为，因此，当我们谈论您所描述的行为时……这是预期的。因此问题变成了如何解决这个缺陷？像您建议的将按钮缩小似乎是个好主意，但如果有100页呢？如果必须将它们全部缩放以适合单行，则这些按钮将非常小。

因此，您可以采用几种方法，这些方法已经嵌入到Bootstrap的“分页(Pagination)”组件中:

1. 显示X个页面编号，其中包括“上一页”和“下一页”的按钮。 2. 以上述方式显示，但添加一个“…”间距来表示有其他页面。

或者，您可以使用一个简单的包装器类“ .table-responsive”来调整“分页(Pagination)”组件本身的行为。

<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%时，可以实现水平滚动...但如果您想要包含所有可能的分页选项，那么这个类也可以很好地发挥作用。

但我希望您能理解...这样做会导致用户体验不佳。这就是为什么许多分页模式都遵循上述要点的原因。

- Robert

---

感谢您的回答。我将会点赞它。关于它丑陋的用户体验，我同意您的看法。当我意识到可能会有许多页面（潜在的50+）时，我决定采用不同的路线。实际上，我只是提出问题，因为我正在尝试学习更多有关Bootstrap的细节，并想知道在这种情况下发生了什么。 - user3657152

分页是那些UI组件之一，根据您的项目范围，有很多好的方法。对于像您这样的东西 - 如果您需要显示所有页面选项...我可能会只使用下拉菜单。 - Robert

请问 @robert 能否详细说明第一个选项？我的意思是在移动设备上切换视图以减少链接并使用“...”占位符？谢谢。也许可以使用Bootstrap 5风格来更新回复。谢谢。 - Robert

Answer 3

如果您感兴趣的话，我会在我的Web应用程序中使用CSS类将<ul>标签用导航标记包围起来，以实现水平滚动条。

<nav class="HORIZONTAL_SCROLL_NAV">

Fiddle演示：https://jsfiddle.net/JonathanParentLevesque/z4gL1wkb/5/

这个的最小CSS样式为：

.HORIZONTAL_SCROLL_NAV {

    -webkit-overflow-scrolling: touch;

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

.HORIZONTAL_SCROLL_NAV>ul {

    margin: 0 auto;
}

如果您想样式化滚动条，您还可以添加一些额外的CSS（支持以下浏览器：https://caniuse.com/#feat=css-scrollbar）：

.HORIZONTAL_SCROLL_NAV::-webkit-scrollbar {

    height: 10px;
}

.HORIZONTAL_SCROLL_NAV::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);

    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.HORIZONTAL_SCROLL_NAV::-webkit-scrollbar-thumb {

    -webkit-border-radius: 10px;
    border-radius: 10px;

    background: rgba(255, 0, 0, 0.8);

    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); 
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

- Jonathan Parent Lévesque

Answer 4

对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： 示例是硬编码的，但应该可以从bootstrap的variables文件中获取变量。

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

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

- XzaR

Answer 5

你可以使用 .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>

- Saeidhp