如何在bootstrap 4中将4列循环到一行？

Question

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

我想在单击bootstrap 4中的模式时实现这一点：I want to achieve this when I click the modal in 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>

我得到的结果是：I AM GETTING THIS RESULT:

我想如果我有12个大小和数量，它将显示6-6在模式-lg在bootstrap 4。

Size 1  Qty 1         Size 2  Qty 1
Size 3  Qty 1         Size 4  Qty 1
Size 5  Qty 1         Size 6  Qty 1
Size 7  Qty 1         Size 8  Qty 1
Size 9  Qty 1         Size 10 Qty 1
Size 11 Qty 1         Size 12 Qty 1

如何管理循环？任何建议都会很有帮助。谢谢..。

Answer 1

我认为这段代码会对你有所帮助。

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

我希望使用这段代码可以解决你的问题。快乐代码:)。

Answer 2

在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>

Answer 3

问题是您也循环了行，而不仅仅是列。另外，你想要两列，所以基本上你必须在php中循环到输入的一半，剩下的放在另一列中。因此，这两个cols：

<?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时，但最重要的是在插入到DB之前进行客户端-服务器端的验证。