为Bootstrap row cols实现分页并修复页面切换对齐异常

问题说明 #

需要为包含5个col-md-12元素的Bootstrap Row实现分页功能，要求每页显示3个元素。参考实现分页后，切换至第二页时出现内容左对齐异常的问题。

问题原因 #

1. 代码中错误将rowsShown设为2，不符合每页显示3个的需求
2. 切换分页时强制设置display: flex，破坏了Bootstrap列默认的block布局，导致padding和对齐规则失效
3. 页码计算未处理小数情况，5个元素每页3个应该显示2页，原代码numPages = rowsTotal / rowsShown会得到1.666，循环只生成1页

修复方案 #

• 将rowsShown修改为3，匹配需求
• 用Bootstrap原生的.show()方法替代css('display', 'flex')，保持列的默认布局
• 用Math.ceil()处理页码计算，确保所有内容都能被分页覆盖

修正后的完整代码 #

JavaScript代码 #

$(document).ready(function () {
    $('.t1').after('<div id="nav" class="text-center"></div>');
    var rowsShown = 3; // 改为每页显示3个
    var rowsTotal = $('.t1 .col-md-12').length;
    var numPages = Math.ceil(rowsTotal / rowsShown); // 处理小数页数
    for (i = 0; i < numPages; i++) {
        var pageNum = i + 1;
        $('#nav').append('<a href="#" class="btn-outline-info" rel="' + i + '">&emsp;' + pageNum + '&emsp;</a> ');
    }
    $('.t1 .col-md-12').hide();
    $('.t1 .col-md-12').slice(0, rowsShown).show();
    $('#nav a:first').addClass('active');
    $('#nav a').bind('click', function (e) {
        e.preventDefault();
        $('#nav a').removeClass('active');
        $(this).addClass('active');
        var currPage = $(this).attr('rel');
        var startItem = currPage * rowsShown;
        var endItem = startItem + rowsShown;
        $('.t1 .col-md-12').css('opacity', '0').hide().slice(startItem, endItem)
            .show().animate({ // 改用show()方法
                opacity: 1
            }, 300);
    });
});

HTML代码 #

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row t1">
 <div class="col-md-12">
                <div class="card p-3">
                    <div class="d-flex flex-row mb-3">
                        <img src="https://i.imgur.com/IpKQiNu.png" width="70">
                        <div class="d-flex flex-column ml-2"><span>Mailchimp</span><span class="text-black-50">Project Management</span><span class="ratings"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span></div>
                    </div>
                    <h6>Capture and sync subscribers from your mailchimp platform to ours with ease.</h6>
                    <div class="d-flex justify-content-between install mt-3"><span>Installed 1234 times</span><span class="text-primary">View&nbsp;<i class="fa fa-angle-right"></i></span></div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card p-3">
                    <div class="d-flex flex-row mb-3">
                        <img src="https://i.imgur.com/42SqVZd.png" width="70">
                        <div class="d-flex flex-column ml-2"><span>Dropbox</span><span class="text-black-50">File Management</span><span class="ratings"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span></div>
                    </div>
                    <h6>Use dropbox to sync your photos to our platform and share it with others.</h6>
                    <div class="d-flex justify-content-between install mt-3"><span>Installed 1234 times</span><span class="text-primary">View&nbsp;<i class="fa fa-angle-right"></i></span></div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card p-3">
                    <div class="d-flex flex-row mb-3">
                        <img src="https://i.imgur.com/lXEUCY8.png" width="70">
                        <div class="d-flex flex-column ml-2"><span>Shopify</span><span class="text-black-50">Ecommerce</span><span class="ratings"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span></div>
                    </div>
                    <h6>Sell you items with ease with having any website with our free platform</h6>
                    <div class="d-flex justify-content-between install mt-3"><span>Installed 1234 times</span><span class="text-primary">View&nbsp;<i class="fa fa-angle-right"></i></span></div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card p-3">
                    <div class="d-flex flex-row mb-3">
                        <img src="https://i.imgur.com/S2In5pz.png" width="70">
                        <div class="d-flex flex-column ml-2"><span>Atlassian</span><span class="text-black-50">Project management</span><span class="ratings"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span></div>
                    </div>
                    <h6>Developing products for developers,project managers and architects.</h6>
                    <div class="d-flex justify-content-between install mt-3"><span>Installed 345 times</span><span class="text-primary">View&nbsp;<i class="fa fa-angle-right"></i></span></div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card p-3">
                    <div class="d-flex flex-row mb-3">
                        <img src="https://i.imgur.com/S5oK3Oe.png" width="70">
                        <div class="d-flex flex-column ml-2"><span>Salesforce</span><span class="text-black-50">Project management</span><span class="ratings"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span></div>
                    </div>
                    <h6>Developing products for developers,project managers and architects.</h6>
                    <div class="d-flex justify-content-between install mt-3"><span>Installed 345 times</span><span class="text-primary">View&nbsp;<i class="fa fa-angle-right"></i></span></div>
                </div>
            </div>
     </div>
</div>

内容的提问来源于stack exchange，提问作者cr7oo