Изменить размер страницы при отзывчивости

Question

Я использую bootstrap для моего использования .... Мой вопрос: как изменить размер страницы, который я объявил в своем скрипте. Избегать необычного места при пагинации. ЗДЕСЬ ИЗОБРАЖЕНИЕ

1. Когда Col-xl-3, размер моей страницы будет 12

2. И когда Col- LG-4, размер моей страницы будет 9

3. И когда Col-md-6, размер моей страницы будет 8

(Изменение Какой объем страницы должен отображаться при отзывчивости)

pageSize = 8;
pagesCount = $(".content").length;
var totalPages = Math.ceil(pagesCount / pageSize);

$('.pagination').twbsPagination({
  totalPages: totalPages,
  visiblePages: 3,
  onPageClick: function(event, page) {
    var startIndex = (pageSize * (page - 1));
    var endIndex = startIndex + pageSize;
    $('.content').hide().filter(function() {
      var idx = $(this).index();
      return idx >= startIndex && idx < endIndex;
    }).show();
  }
});

<div class="row">
  <div class="content col-6 col-md-6 col-lg-4 col-xl-3 mt-4">
    <div class="content-head">
      <img src="image.png">
    </div>
    <div class="content-title">
      <h3 class="text-center">CARD TITLE</h3>
    </div>
  </div>
</div>

Вот сценарий и Html Specifi c Блок кода.

Answer 1

Прежде всего вы должны определить размер окна:

var detect = function(width) {
if (width < 576) {
    callPagination(12);
} else if (width >= 576 && width < 768) {
    callPagination(10);
} else if (width >= 768 && width < 992) {
    callPagination(9);
} else if (width >= 992) {
    callPagination(8);
}};

, и вы должны создать функцию:

var callPagination = function(pageSize) {
pageSize = pageSize;
pagesCount = $('.content').length;
var totalPages = Math.ceil(pagesCount / pageSize);

$('.pagination').twbsPagination({
    totalPages: totalPages,
    visiblePages: 3,
    onPageClick: function(event, page) {
        var startIndex = pageSize * (page - 1);
        var endIndex = startIndex + pageSize;
        $('.content')
            .hide()
            .filter(function() {
                var idx = $(this).index();
                return idx >= startIndex && idx < endIndex;
            })
            .show();
    }
});};

и вызвать функцию, когда страница будет готова

$(document).ready(function() {
var width = window.innerWidth;
detect(width)

$(window).resize(function() {
    var width = window.innerWidth;
    detect(width)
});});