如何设置推/拉列只有较小的屏幕尺寸在Bootstrap [英] How to set Push/pull columns for Only smaller screen sizes in Bootstrap

问题描述

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

 < div class = -1g-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 class =col-lg-3 col-md-3 col-sm-6 col-sm-pull-6 col-xs-12> 3< / div& 
  

SO，它在小屏幕上工作正常（如下所示）。

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

$ b b

但是，在这里，我使用 col-sm-pull - * 和 col-sm-push- * 只有小屏幕。

如果，我将使用col-sm-push / pull- *& col-xs-push / pull- *所以，为什么它是在大型&中等屏幕和大屏幕：

 
 code>我想这个我得到这
 ------- --------- ----- ------- -----  - -------- 
 | 1 | 2 | 3 | | 1 | 3 | 2 | 
 ------- --------- ----- ------- ----- ---------- $ b $所以，如何设置推/拉列只有较小的屏幕？
 
 
 
 
 
 
 $ b b 
这里有什么问题？ 
解决方案
   div> 
您需要使用 *  -  push-0 和 *  -  pull-0 在 md 和 lg 上使用推/拉。此外，我删除了 lg ，因为单独的 md 将适用于您的情况。
 < 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 class =col-md-3 col-md-pull-0 col-sm-6 col-sm-pull-6 col-xs-12> 3& 
  
演示： http://www.bootply.com/PPTzE3ONur  
 
I have the following layout on a page(with 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>
SO, it is working perfect in small screen(according to below).
 -----------------------
|           1           |
 ------------------------
|     3     |     2     |
 ------- ------- -------
But, Here, I have use col-sm-pull-* and col-sm-push-* for only small screen. though, Push/pull columns is call in Medium screen and Large screen.

if, I will use col-sm-push/pull-* & col-xs-push/pull-* So, why it is call(run) in large & medium screen?

Medium screen and Large screen:
I want to this                  I get this
 ------- --------- -----         ------- ----- ---------
|   1   |    2    |  3  |       |   1   |  3  |    2    |
 ------- --------- -----         ------- ----- ----------
So, How to set Push/pull columns only smaller screen?

What is wrong Here? 
How can i fix it?

Would appreciate the help.
解决方案
You need to use *-push-0 and *-pull-0 to tell Bootstrap not to use push/pull on md and lg. Also I removed the lg since md alone will work in your case.
<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>
Demo: http://www.bootply.com/PPTzE3ONur

                        
这篇关于如何设置推/拉列只有较小的屏幕尺寸在Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！