Question

我正在使用bootstrap，我有一个这样的表：

| Label 1 | Value 1 | Label 2 | Value 2 | 
| Label 3 | Value 3 | Label 4 | Value 4 | 
| Label 5 | Value 5 | Label 6 | Value 6 | 
| Label 7 | Value 7 | Label 8 | Value 8 |

但是在低分辨率（即移动设备）上，我希望看到类似的内容：

| Label 1 | Value 1 | 
| Label 3 | Value 3 | 
| Label 5 | Value 5 | 
| Label 7 | Value 7 | 
| Label 2 | Value 2 | 
| Label 4 | Value 4 | 
| Label 6 | Value 6 | 
| Label 8 | Value 8 |

或者更喜欢那样：

| Label 1 | Value 1 | 
| Label 2 | Value 2 | 
| Label 3 | Value 3 | 
| Label 4 | Value 4 | 
| Label 5 | Value 5 | 
| Label 6 | Value 6 | 
| Label 7 | Value 7 | 
| Label 8 | Value 8 |

我知道@media查询是如何工作的，但我知道如何使这种“分裂”。

你能帮帮我吗？

Answer 1

如果您想使用<div>元素bootstrap的col和row类应该能够提供帮助。

<div class="row">
    <div class="col-sm-6>
        <div class="row">
            <div class="col-sm-6>
                Label1
            </div>
            <div class="col-sm-6>
                Value1
            </div>
        </div>
    </div>
    <div class="col-sm-6>
        <div class="row">
            <div class="col-sm-6>
                Label2
            </div>
            <div class="col-sm-6>
                Value2
            </div>
        </div>
    </div>
</div>

它不是一个非常漂亮的选项，但它会像你想要的第二个“首选”选项一样包装。最外面的行是表中的一行。第一个选项可以通过自己的引导列中的两个表来实现。

如何将我的引导表分成两半并将其放在另一个之上？

1 个答案: