html - Bootstrap 中带有列数的 Css3 多列

Question

我想要一个像 css3 多列一样工作的布局，具有 column-count: 4 功能，这样布局是流畅的。 我的布局如下: 对于小型设备:

control1
control2
control3
control4

对于更大的设备:(查看订单)

control1  control3
control2  control4

然后我可以有更大的屏幕

control1  control2  control3  control4

这保持了控件的顺序，这样如果我想使用我现有的键(选项卡索引)它就可以完美地工作。

请在资源管理器中查看这如何与 css3 一起工作

JS Fiddle

Answer 1

您可以使用网格系统对所有这些进行定义:Here .定义屏幕尺寸:xs:超小，sm:小，md:中等，lg:对于大。现在我只是决定使用 sm:对于小型设备，lg 对于您的情况下的超大屏幕，嵌套列

<div class="row">
  <div class="col-md-6 col-lg-6 col-sm-12">
    <div class="col-md-12 col-lg-6 col-sm-12">control1</div>
    <div class="col-md-12 col-lg-6 col-sm-12">control2</div>
  </div>
  <div class="col-md-6 col-lg-6 col-sm-12">
    <div class="col-md-12 col-lg-6 col-sm-12">control3</div>
    <div class="col-md-12 col-lg-6 col-sm-12">control4</div>
  </div>
</div>