Bootstrap 4 Pagination Scaling / Отзывчивость - PullRequest
Новая
       32

Bootstrap 4 Pagination Scaling / Отзывчивость

0 голосов
/ 02 мая 2018

Я использую компонент нумерации страниц в Bootstrap 4, как объяснено здесь .

Я могу успешно перемещаться по своим страницам по мере необходимости, однако я заметил, что кнопки навигации, кажется, не реагируют на изменения размера экрана, как я ожидал. Например, в настоящее время я работаю с 16 страницами, и когда я просматриваю это на мобильном устройстве или изменяю размер своего браузера до меньшего размера, я вижу только кнопки страниц для страниц с 4 по 14. Я предполагаю, что ожидал, что кнопки уменьшатся как ширина страницы была уменьшена, но, похоже, этого не происходит.

подробности:

  • Я добавил метатег для области просмотра в соответствии с требованиями Bootstrap.
  • Я использую контейнерный div для хранения моего списка нумерации страниц.
  • Я использую Bootstrap CDN, но он загружается правильно.
  • Я не включил пример кода, потому что я следую примеру Bootstrap для T.

Спасибо за вашу помощь:)

Ответы [ 2 ]

0 голосов
/ 18 июня 2018

Если вам интересно, в моем веб-приложении я окружаю <ul> тегом навигации, используя класс CSS для горизонтальной полосы прокрутки. 

<nav class="HORIZONTAL_SCROLL_NAV">

Демо Fiddle : https://jsfiddle.net/JonathanParentLevesque/z4gL1wkb/5/

Boostrap 4 pagination with a horizontal scrollbar

Минимальный 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);
}
0 голосов
/ 02 мая 2018

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

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

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

  • Отображение номеров страниц 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. Вот почему так много шаблонов нумерации страниц следуют вышеуказанным пунктам.

...