如何在Bootstrap 4中将4列循环成一行?

时间:2018-08-06 16:31:23

标签: jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-4 bootstrap-modal

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

当我单击引导程序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个大小和数量,它将在引导程序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

如何管理循环?任何的意见都将会有帮助。谢谢...

3 个答案:

答案 0 :(得分:0)

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

public class MyPreferencesActivity extends AppCompatActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_preferences_activity)
        if (savedInstanceState == null) {
            getSupportFragmentManager().beginTransaction()
                    .replace(R.id.fragment_container, MyPreferencesFragment())
                    .commitNow()
        }
    }
}

以此替换“ col-md-6”。

public class MyPreferencesFragment extends PreferenceFragmentCompat {

    @Override
    public void onCreatePreferences(Bundle savedInstanceState, String rootKey) {
        setPreferencesFromResource(R.xml.my_preferences_fragment); // Your preferences fragment
    }
}

这是您应该拥有的。还要删除代码顶部和底部的开口。

PreferenceFragmentCompat

答案 1 :(得分:0)

问题是您也在循环行,而不仅仅是循环。另外,您需要2列,因此基本上您必须在php中循环到您拥有的许多输入的一半,而其余的则在另一列中。所以两个列:

<?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时也要记住,但最重要的是,在插入数据库之前先进行客户端-服务器端验证。

答案 2 :(得分:0)

我认为这段代码将为您提供帮助。

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

我希望使用此代码可以解决您的问题。快乐代码:)。