Bootstrap 4 Масштабирование / отзывчивость разбивки на страницы

Компонент Bootstrap Pagination не имеет никакого интеллектуального, отзывчивого поведения, встроенного в него (например, Grid). Итак, когда мы говорим о поведении, которое вы описываете ... это соответствует ожиданиям.

Тогда возникает проблема: как устранить этот недостаток? Уменьшение масштаба кнопок, как вы предлагаете, кажется хорошей идеей; а что, если у вас 100 страниц? Если его нужно масштабировать, чтобы уместить все 100 кнопок в одной строке, эти кнопки будут чрезвычайно маленькими.

Итак, у вас есть несколько подходов, которые находятся встроил в компонент Bootstrap Pagination:

• Отображение номеров X страниц с помощью кнопок Prev и Next.
• Вышеупомянутое, но с разделителем ..., указывающим на наличие дополнительных страниц.

Или вы можете настроить поведение самого компонента 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% ширины экрана ... но здесь он отлично работает, обеспечивая небольшую полезность, если вы хотите включить все возможные варианты разбивки на страницы.

Надеюсь, вы понимаете ... это уродливый UX. Вот почему так много шаблонов нумерации страниц следуют указанным выше пунктам.

Если вам интересно, в моем веб-приложении я окружаю <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);
}

Можно использовать .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>

В зависимости от сценария одним изящным приемом является использование класса гибкой справки .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>

Это полезно, когда у вас не слишком много страниц и вы хотите, чтобы все они были видны без прокрутки или чего-то подобного.

Некоторое улучшение ответа Дарио Муньоса:

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