Question

我想在两个不同的行上打印一个表格。所以这是我所做的：http://jsfiddle.net/aq9Laaew/107520/

问题仍然存在，如果缩小屏幕，我有两行，但是如果数据可以全部打印在同一行中，那么它们都将打印在同一行中。

我想一直得到2条不同的线（样本行中的表格行）。

您有个主意吗？谢谢这段代码中可能有一些奇怪的东西来自引导2。如果可以的话，请注意。

   <form class="form-inline" name="formFiltre" id="formFiltre" method="post">


            <div class="form-row">
                <input type="hidden" name="nav" value="1" />

                <label for="rf_numero">Numéro</label>
                <input type="text" name="rf_numero" id="rf_numero" class="form-control" value="" />
                <label for="rf_client">Client</label>
                <input type="text" name="rf_client" id="rf_client" class="form-control" value="" />


            </div>

            <div class="form-row">
                <label for="statuts">Statut </label>
                <select name="rf_statut_commande" id="rf_statut_commande" class="form-control">
                    <option value="">-- Commande --</option>
                    <option value="En attente de paiement" >En attente de paiement</option>
                    <option value="Paiement effectué" >Paiement effectué</option>
                    <option value="Traitement en cours" >Traitement en cours</option>
                    <option value="Expedié" >Expediée</option>
                    <option value="Terminée" >Terminée</option>
                    <option value="Annulée" >Annulée</option>
                </select>
                <select name="rf_reglement_statut" id="rf_reglement_statut" class="form-control">
                    <option value="">-- Règlement --</option>
                    <option value="En attente" >En attente</option>
                    <option value="Effectué" >Effectué</option>
                    <option value="Annulé" >Annulé</option>
                </select>
                <input type="submit" class="btn" value="Rechercher" />
            </div>

    </form>

Answer 1

Bootstrap是“移动优先”的，这意味着组件对移动设备的“响应”是主要考虑因素。当您减小屏幕宽度时，最终大多数内容都会堆叠在一起。您可以选择媒体查询“中断”以在一定程度上控制较小屏幕尺寸上的堆叠。

但对于内联表单，具体取决于每个Bootstrap文档：

控件仅在至少576像素宽的视口中内嵌显示，以说明移动设备上的视口狭窄。

根据您的需要，您必须选择一个实际定义2行的表单布局。调整屏幕大小的方式越小，表单最终将堆叠所有输入，因此它们将显示作为一列，但要考虑定义的行进行堆叠。

Bootstrap为您提供了多个 row 选项，因此，如果您希望内联表单保持内联而不是堆叠，则可以考虑使用.sr-only和{{ 1}}属性

placeholder

表格在Bootstrap 4中包含两行

1 个答案: