使用引导卡每 3 行循环一次答案

【问题标题】：loop every 3 row using bootstrap card使用引导卡每 3 行循环一次
【发布时间】：2020-06-16 20:20:27
【问题描述】：

我试图弄清楚如何使每 3 张引导卡循环。我在这里有一个模态的详细信息，但我的详细信息显示在每张卡片的底部。你能帮我如何制作每3张卡片吗？我只是想让它简短地向下滚动。我下面的示例是我的代码结果的图像。

  [![<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>

我想做这个，请看下图。

【问题讨论】：

您能否详细解释一下您想要做什么？我不明白你在问什么

标签： javascript bootstrap-4

【解决方案1】：

你基本上需要模运算符：

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 卡片组

只需将所有卡片填充到一个容器中，然后在 CSS 中定义列布局。更容易，也反应灵敏。 CSS 示例：Arrange multiple divs in CSS/JS?
引导文档：https://getbootstrap.com/docs/4.3/components/card/#card-decks

DEMO

【讨论】：