在Bootstrap 3中使用col-push和col-pull进行列顺序操作

Question

我正在尝试使用Bootstrap Grid系统创建具有三个响应视图（移动设备，平板电脑，台式机）的表单。 我的手机和平板电脑视图正常运行，但桌面视图出现问题。 对于移动设备，我有两个这样排列的用户输入表单：

[12] 
[12]

对于平板电脑：

[offset:3][6]
[offset:3][6] 

对于台式机，我也希望它看起来像：

[4][4]  *centered in the middle of the page*

我相信我可以使用col-push和col-pull来做到这一点？

这是我的代码：

 <div class="row">
   <div class=" col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 "></div>
   <div class=" col-xs-12 col-sm-6 col-sm-offset-3 col-md-4"></div> 
 </div> 

Answer 1

您只需要偏移第一列，然后在第二列中重置偏移量 ，如下所示：

的HTML

<div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-2></div>
    <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0"></div> 
</div>