Jquery 如何在Bootstrap4中一行循环4列?

Jquery 如何在Bootstrap4中一行循环4列?,jquery,twitter-bootstrap,twitter-bootstrap-3,bootstrap-4,bootstrap-modal,Jquery,Twitter Bootstrap,Twitter Bootstrap 3,Bootstrap 4,Bootstrap Modal,我想在循环的一行中显示4列,但我无法实现 我想在单击bootstrap 4中的模式时实现这一点: 我正在这样做: <div class="modal-body"> <div class="container-fluid"> <?php for($i=1; $i<=12; $i++):?> <div class="row"> <div class="form-group c

我想在循环的一行中显示4列,但我无法实现

我想在单击bootstrap 4中的模式时实现这一点:

我正在这样做:

<div class="modal-body">
    <div class="container-fluid">
        <?php for($i=1; $i<=12; $i++):?>
        <div class="row">
            <div class="form-group col-md-6">
                <label  for="size<?=$i;?>">Size:</label>
                <input class="form-control" type="text"  name="size<?=$i;?>" id="size<?=$i;?>" value="">
            </div>
            <div class="form-group col-md-6">
                <label for="qty<?=$i;?>">Quantity:</label>
                <input class="form-control" type="number"  name="qty<?=$i;?>" id="qty<?=$i;?>" value="" min="0">
            </div>
        </div>
        <?php endfor; ?>
    </div>
</div>

如何管理循环?任何建议都会有帮助。谢谢…

在for循环之外创建一个变量,用于保存$i数组的数量/计数

<?php $count = count($i);?>

用此替换“col-md-6”

<?php echo ($count === 12) ? 'col-md-6': 'col-md-3'; ?>

这是你应该吃的。同时在代码的顶部和底部打开

<div class="modal-body">
<div class="container-fluid">
<?php $count = count($i);?>
<?php for($i=1; $i<=12; $i++):?>
<?php echo $count;?>

<div class="row">

<div class="form-group <?php echo (count($i) === 12) ? 'col-md-6': 'col-md-3'; ?>">
<label  for="size<?=$i;?>">Size:</label>
<input class="form-control" type="text"  name="size<?=$i;?>" id="size<?=$i;?>" value="">
 </div>
 <div class="form-group <?php echo (count($i) === 12) ? 'col-md-6': 'col-md-3'; ?>">
 <label for="qty<?=$i;?>">Quantity:</label>
 <input class="form-control" type="number"  name="qty<?=$i;?>" id="qty<?=$i;?>" value="" min="0">
 </div>
 </div>
 <?php endfor; ?>
 </div>
 </div>


问题是您正在循环行,而不仅仅是列。此外,您还需要2列,因此基本上您必须在php中循环到您拥有的输入量的一半,其余部分在另一列中。因此,两个COL:

<?php for(i=1; i<6; i++):?><div class="col-md-6">First columns of inputs here</div><?php endfor; ?>
<?php for(i=1; i<6; i++):?><div class="col-md-6">First columns of inputs here</div><?php endfor; ?>
此处输入的第一列
这里输入的第一列

在行中的每个循环上循环,您应该会得到并排显示2列输入循环的理想结果。在循环为它们分配唯一id时也要记住,但最重要的是在插入数据库之前要进行客户端-服务器端验证

我想这段代码会对你有所帮助

<div class="modal-body">
    <div class="container-fluid">

        <?php for($i=0; $i<=11; $i++):?>
            <?php if($i%2 == 0) : ?>
                <div class="row">
                    <div class="form-group col-md-4">
                        <label for="size<?=$i;?>">Size:</label>
                        <input class="form-control" type="text" name="size<?=$i;?>" id="size<?=$i;?>" value="">
                    </div>
                    <div class="form-group col-md-2">
                        <label for="qty<?=$i;?>">Quantity:</label>
                        <input class="form-control" type="number" name="qty<?=$i;?>" id="qty<?=$i;?>" value="" min="0">
                    </div>
            <?php else : ?>
                    <div class="form-group col-md-4">
                        <label for="size<?=$i;?>">Size:</label>
                        <input class="form-control" type="text" name="size<?=$i;?>" id="size<?=$i;?>" value="">
                    </div>
                    <div class="form-group col-md-2">
                        <label for="qty<?=$i;?>">Quantity:</label>
                        <input class="form-control" type="number" name="qty<?=$i;?>" id="qty<?=$i;?>" value="" min="0">
                    </div>
                </div>
                <?php endif; ?>
        <?php endfor; ?>
    </div>
</div>


使用
col-md-3
获得一行中的四列。我使用了它,但没有得到我想要的结果。当我使用col-md-3时,我得到了一行中的大小1数量1,12次。
<div class="modal-body">
    <div class="container-fluid">

        <?php for($i=0; $i<=11; $i++):?>
            <?php if($i%2 == 0) : ?>
                <div class="row">
                    <div class="form-group col-md-4">
                        <label for="size<?=$i;?>">Size:</label>
                        <input class="form-control" type="text" name="size<?=$i;?>" id="size<?=$i;?>" value="">
                    </div>
                    <div class="form-group col-md-2">
                        <label for="qty<?=$i;?>">Quantity:</label>
                        <input class="form-control" type="number" name="qty<?=$i;?>" id="qty<?=$i;?>" value="" min="0">
                    </div>
            <?php else : ?>
                    <div class="form-group col-md-4">
                        <label for="size<?=$i;?>">Size:</label>
                        <input class="form-control" type="text" name="size<?=$i;?>" id="size<?=$i;?>" value="">
                    </div>
                    <div class="form-group col-md-2">
                        <label for="qty<?=$i;?>">Quantity:</label>
                        <input class="form-control" type="number" name="qty<?=$i;?>" id="qty<?=$i;?>" value="" min="0">
                    </div>
                </div>
                <?php endif; ?>
        <?php endfor; ?>
    </div>
</div>