我想為引導(dǎo)行列添加分頁。正如你所看到的代碼片段，你可以看到5列。有沒有什么辦法，我可以應(yīng)用分頁引導(dǎo)行列。

$(document).ready(function () {
        debugger;
        $('.t1').after('<div id="nav" class="text-center"></div>');
        var rowsShown = 2;
        var rowsTotal = $('.t1 .col-md-12').length;
        var numPages = 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).
                css('display', 'flex').animate({
                    opacity: 1
                }, 300);
        });
    });

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<link  rel="stylesheet"/>
<link  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>