如何在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个大小和数量，它将在bootstrap 4中的modal-lg中连续显示6-6。

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

问题是你正在循环行而不仅仅是列。你也想要2列，所以基本上你必须在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之前进行客户端 - 服务器端验证。

Answer 3

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