Question

试验Bootstrap4（beta）和元素排序。我有一行，我想显示4个文本（S，M，L，XL）。我使用col-6将行划分为6列，用于所有屏幕尺寸。我想，bootstrap将选择S，放入row1col1，选择M，将其放入row1col7。

bootstrap如何解释L和XL的位置？ L和XL的列号是多少？请注意，即使表格显示2行，所有这些都属于单行。

<style>
        .my-border {
            border:solid;
        }
    </style>
<div class="container-fluid">
        <div class="row">
            <div class="col-6 my-border"> Small </div>
            <div class="col-6 my-border"> Medium </div>
            <div class="col-6 my-border"> Large </div>
            <div class="col-6 my-border"> X-Large </div>            
        </div>

    </div>

后来我在代码中添加了ordering。我想要md或更大的设备，M应该在S之前，L和XL保持不变。但在以下代码中，即使M和S交换位置，L和XL也会成为第1行，而M和S会成为行2。

<div class="container-fluid">
        <div class="row">
            <div class="col-6 my-border order-md-6"> Small </div>
            <div class="col-6 my-border order-md-1"> Medium </div>
            <div class="col-6 my-border"> Large </div>
            <div class="col-6 my-border"> X-Large </div>            
        </div>

    </div>

发生了什么事？

Answer 1

这有效

<div class="row">
            <div class="col-6 my-border order-md-4"> Small </div>
            <div class="col-6 my-border order-md-1"> Medium </div>
            <div class="col-6 my-border order-md-7"> Large </div>
            <div class="col-6 my-border order-md-10"> X-Large </div>            
        </div>

我认为Bootstrap正在工作的方式是，它首先选择没有排序的元素并以FIFO方式将它们放入列中。然后它选择带有排序元素的所有元素（比如1）并将它们按FIFO顺序排列。如果在执行此操作时，其他元素已经存在于该列中，则Bootstrap会将此元素放在该列的末尾。我认为为所有列提供排序以获得可预测的行为非常重要。

更多例子。这是大（没有订购，第一），X大（没有订购，第二），中（订购1），小（订购4）

<div class="row">
            <div class="col-6 my-border order-md-4"> Small </div>
            <div class="col-6 my-border order-md-1  "> Medium </div>
            <div class="col-6 my-border "> Large </div>
            <div class="col-6 my-border "> X-Large </div>            
        </div>

此顺序为中（排序1，第一），大（排序1，秒），小（排序4，第一），X-大（排序4，秒）

<div class="row">
            <div class="col-6 my-border order-md-4"> Small </div>
            <div class="col-6 my-border order-md-1  "> Medium </div>
            <div class="col-6 my-border order-md-1"> Large </div>
            <div class="col-6 my-border order-md-4"> X-Large </div>            
        </div>

订购和偏移规则是否适用于堆叠的列？

1 个答案: