使用引导卡每3行循环一次 [英] loop every 3 row using bootstrap card

问题描述

我正在尝试弄清楚如何每3张引导卡循环一次.我在这里有模态的详细信息，但我的详细信息仅显示在每张卡的底部.您能帮我每三张纸牌吗?我只是想让它简短地向下滚动.下面的示例是我的代码结果所在的图片.

I'm trying to figure it out how to make a loop of every 3 bootstrap cards. i have here a details in modal, but my details where shown just going to the bottom of every card. can you help me how to make it every 3 cards. i'm just trying to make it short to scroll down. My sample below is the image where the result of my code.

  [![<script>    
       var DeptHandle = new Array();
        var OnProcess = new Array();

        for (i = 0; i < table.length; i++) {
            DeptHandle.push(table\[i\].DeptHandle);
            OnProcess.push({
                "OnProcessCode": table\[i\].OnProcessCode,
                "OnProcessName": table\[i\].OnProcessName,
                "Amount": table\[i\].Amount,
                "Remarks": table\[i\].Remarks,
                "DeptHandle": table\[i\].DeptHandle,
                "ClassDeptHandle": table\[i\].ClassDeptHandle,
            });
        }
        DeptHandle.filter((item, pos) => {
            return DeptHandle.indexOf(item) == pos;
        }).forEach(function (name, key) {
            html += '<div class="container">';
            html += '<div class="card mb-3 shadow" style="padding:10px;"><div class="card-header">';


            html += '<h4 class="mb-3"><strong><u>' + name + '</u></strong></h4></div>';
            html += '<div class="card-body">';
            html += '<div id="' + name +'"';
            for (let i in OnProcess) {
                if (OnProcess\[i\].DeptHandle === name) {


                        html += '<input type="hidden"  name="OnProcessItem" id="OnProcessItem"  value="' + OnProcess\[i\].OnProcessCode + '" class=" form-control ">';
                        html += 'Amount: <input type="text"   readonly="true" name="Amount" id="Amount" value="' + OnProcess\[i\].Amount + '" class="AllField form-control '+table\[i\].ClassDeptHandle+ '">';
                        html += '</div>';
                        html += '<div class="col">';
                        html += 'Remarks: <input type="text"  readonly="true" name="Remarks" id="Remarks" value="' + OnProcess\[i\].Remarks + '" class="AllField form-control '+table\[i\].ClassDeptHandle+ '">';
                        html += '</div>';
                        html += '</div>';
                        }
                        }


            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '</div>';

        });

</script> 

我要做到这一点，请参见下图.

I want to make it this, please see image below.

推荐答案

您基本上需要模运算符:

You basically need the modulus operator:

if (i % 3 === 0 || i + 1 === 1){ // zero-based index
    // open new row
}

// start new card

if (i % 3 === 0 || i === arr.length){
    // close row
}

现在，上面的示例是解决此问题的快速方法.由于我想避免对此进行详细介绍，因此我想提供一种不同的方法.仅CSS => Bootstrap 4卡座

Now, the above example is a quick way of how to go around this problem. Since I wanted to avoid going into detail with this I'd like to offer a different approach. CSS only => Bootstrap 4 card deck

只需用所有卡片填充一个容器，然后在CSS中定义列布局.容易得多，而且反应灵敏.CSS示例:在CSS/JS中布置多个div?
引导文档: https://getbootstrap.com/docs/4.3/components/卡/#card-deck

Simply fill a single container with all your cards, and let the column layout be defined in CSS. Much easier and also responsive. CSS example: Arrange multiple divs in CSS/JS?
Bootstrap doc: https://getbootstrap.com/docs/4.3/components/card/#card-decks

演示

DEMO

这篇关于使用引导卡每3行循环一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！