Question

我尝试使用Bootstrap网格系统创建包含三个响应式视图（移动设备，平板电脑，桌面设备）的表单。我的手机和平板电脑视图工作正常，但我在使用桌面视图时出现问题。对于移动设备，我有两个用户输入表格，排列如下：

[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

您需要仅偏移第一列，并在第二列中偏移reset the offset，如下所示：

<强> 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>

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

1 个答案: