Question

我在页面上有以下布局（使用Bootstrap 3.2.0）：

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">1</div>
<div class="col-lg-5 col-md-5 col-sm-6 col-sm-push-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-sm-pull-6 col-xs-12">3</div>

所以，它在小屏幕上工作得很好（根据下面的内容）。

 -----------------------
|           1           |
 ------------------------
|     3     |     2     |
 ------- ------- -------

但是，在这里，我只使用col-sm-pull-*和col-sm-push-*作为小屏幕。但是，在中画面和大屏幕中调用推/拉列。

如果，我将使用col-sm-push / pull- *＆amp; col-xs-push / pull- *那么，为什么它是大型和＆amp;的呼叫（运行）中画面？

中画面和大屏幕：

I want to this                  I get this
 ------- --------- -----         ------- ----- ---------
|   1   |    2    |  3  |       |   1   |  3  |    2    |
 ------- --------- -----         ------- ----- ----------

那么，如何将推/拉列设置为更小的屏幕？

这里有什么问题？我该如何解决？

非常感谢帮助。

Answer 1

您需要使用*-push-0和*-pull-0告诉Bootstrap不要在md和lg上使用推/拉。此外，我删除了lg，因为md单独适用于您的情况。 1-2-3大，1-3-2手机。

<div class="col-md-4 col-sm-12 col-xs-12">1</div>
<div class="col-md-5 col-md-push-0 col-sm-6 col-sm-push-6 col-xs-12">2</div>
<div class="col-md-3 col-md-pull-0 col-sm-6 col-sm-pull-6 col-xs-12">3</div>

演示：http://www.bootply.com/PPTzE3ONur

Answer 2

使用推拉式col-xs而不是col-sm，col-xs-push/pull-...

用以下代码替换您的代码：

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">1</div>
<div class="col-lg-5 col-md-5 col-sm-6 col-xs-push-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-pull-6 col-xs-12">3</div>

如何在Bootstrap中设置只有较小屏幕尺寸的推/拉列

2 个答案: