如何将我的 bootstrap table 分成两半并将一个放在另一个上面？

Question

我正在使用 bootstrap 并且我有这样一个 table:

| 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 查询是如何工作的，但我知道如何实现 "split"。

你能帮帮我吗？

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>

它不是一个非常漂亮的选项，但它会像您想要的第二个 'prefered' 选项一样换行。最外面一行是table中的一行。第一个选项可以通过 2 table 来实现，每个都在它们自己的 bootstrap 列中。

如何将我的 bootstrap table 分成两半并将一个放在另一个上面？

How to split my bootstrap table in half and put one above the other?

tabular

media-queries

twitter-bootstrap