使用引导卡每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屋!