Bootstrap 4 分页缩放/响应性

Posted 2023-03-10

【中文标题】Bootstrap 4 分页缩放/响应性

【英文标题】：Bootstrap 4 Pagination Scaling/Responsiveness

【发布时间】：2018-10-12 22:27:53

【问题描述】：

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

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

详情：

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

感谢您的帮助:)

【参考方案1】：

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% 时进行水平滚动......但如果你愿意，它在这里工作得很好，可以提供一些实用程序合并所有可能的分页选项。

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

【讨论】：

感谢您的回答。我要投赞成票。至于丑陋的用户体验，我同意你的看法。当我意识到我可能有任意数量的页面（可能超过 50 页）时，我决定走一条不同的路线。我真的只是问了这个问题，因为我正在尝试了解有关 Bootstrap 的更多详细信息，并想知道在这种情况下发生了什么。

分页是那些 UI 组件之一，它具有...大量的好方法，具体取决于您的项目范围。对于像你这样的东西 - 如果你需要显示所有页面选项......我可能只是使用下拉菜单。

【参考方案2】：

如果您有兴趣，在我的网络应用程序中，我会在 <ul> 周围加上一个导航标签，使用 CSS 类作为水平滚动条。

<nav class="HORIZONTAL_SCROLL_NAV">

小提琴演示：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);

【参考方案3】：

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

【参考方案4】：

根据场景，一个巧妙的技巧是 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>

当您没有太多页面并希望它们都可见而无需滚动或类似操作时，这很有用。

【参考方案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;