Javascript 在响应时更改页面大小

我正在使用bootstrap…我的问题是如何更改我在脚本中声明的页面大小。在分页时避免出现不寻常的空格。

当Col-xl-3时，我的页面大小将为12

当Col-lg-4时，我的页面大小将为9

当Col-md-6时，我的页面大小将为8

（更改响应时显示的页面内容数量）

pageSize=8；
PageScont=$（“.content”）.length；
var totalPages=Math.ceil（PageScont/pageSize）；
$（'.pagination'）.twbsPagination({
totalPages:totalPages，
浏览网页：3，
onPageClick:功能（事件，页面）{
var startIndex=（页面大小*（第1页））；
var endIndex=startIndex+pageSize；
$（'.content'）.hide（）.filter（函数（）{
var idx=$（this.index（）；
返回idx>=startIndex&&idx

卡片标题
首先，您必须检测窗口大小：

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