推动和拉动列 - Bootstrap 4

时间:2017-07-28 06:21:39

标签: twitter-bootstrap bootstrap-4

这就是我需要的:

桌面 B A

移动:

A
B

这是我的HTML:

<div class="row">

    <div class="col-md-7 col-sm-7 push-md-5">
        A
    </div>

    <div class="col-md-5 col-sm-5 pull-md-7">
        B
    </div>

</div>

移动设备上的顺序正确但桌面上没有。我尝试了几个指南和帮助材料,但没有运气。在大多数指南中,他们移动的是相同的列,如4或6,所以清楚地理解它有点令人困惑。

6 个答案:

答案 0 :(得分:10)

最新 Bootstrap v4.x 值得注意的是,push-*pull-*类已replaced by order-*

这意味着您的示例(和答案):

<div class="row">
    <div class="col-md-7 push-md-5">
        A
    </div>

    <div class="col-md-5 pull-md-7">
        B
    </div>
</div>

变为:

<div class="row">
    <div class="col-md-7 order-md-5">
        A
    </div>

    <div class="col-md-5 order-md-7">
        B
    </div>
</div>

答案 1 :(得分:2)

上面的答案很有帮助,但我正在回答我自己的问题,更详细一些,以便将来可以帮助任何人。 :)

问题:实际上,我的技术是正确的,但错误的假设。我在想,col-sm-*将适用于移动设备。但此课程适用于> 576px屏幕设备。

以下是网格分类 :( V4 Alpha 6)

  • 超小:&lt; 576px .col-
  • 小:≥576px.col-sm-
  • 中:≥768px.col-md-
  • 大:≥992px.col-lg-
  • 超大:≥1200px.col-xl-

Reference Bootstrap 4 Alpha for more detail

<强>技术:

  1. 首先为移动屏幕编写HTML(例如A B)
  2. 对大屏幕设备使用推拉(例如B A)
  3. 以下代码适用于我的问题:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    
    <div class="container-fluid">
    
      <div class="row">
    
    	<div class="col-md-7 push-md-5">
    		A
    	</div>
    	
    	<div class="col-md-5 pull-md-7">
    		B
    	</div>
    
    </div>
    
    </div>

答案 2 :(得分:0)

您可以使用解决方案https://jsfiddle.net/kzmz7qaL/1/

.div1{ 
  background: blue;
  color: #fff;
}

.div2 {
  background: red;
  color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">

  <div class="row">

    <div class="col-md-7 col-sm-7 push-sm-5 div1">
        A
    </div>

    <div class="col-md-5 col-sm-5 pull-sm-7 div2">
        B
    </div>

  </div>

</div>

我想这就是你要找的...... 改变了拉动&amp;推送小屏幕( sm )而不是中画面( md

适用于左侧值(指定的col值)

推送从右侧(指定了col值)

答案 3 :(得分:0)

Bootstrap&#34;小&#34; (sm)大小涵盖768到992像素的范围。 &#34;介质&#34; (md)的像素为992到1200像素。 (Reference for Bootstrap 4 alpha)。

通过使用class="col-md-7 col-sm-7 push-md-5",您可以定义当屏幕宽度超过992像素时发生推送。宽度在768和992像素之间的屏幕只使用col-sm-7设置,只有更小的屏幕使用默认值,使用全宽。

因此,对于非常小的屏幕(<576像素),您应该在A之上看到B。对于小屏幕(使用sm设置),您将看到A B,因为它们未被推/拉。只有大屏幕(&gt; 992像素,使用md类),您才能看到B A

要修复它,只需删除md - 类,并用其他人提出的sm变体替换pull / push-classes。

答案 4 :(得分:0)

bootstrap 4中不包含col-md-push-5和col-md-pull-7类,但Bootstrap扩展可以。 http://bootstrap-extension.com/#gridsystem

解决方案:

<div class="row">

<div class="col-md-7 col-sm-7 col-md-push-5">
    A
</div>

<div class="col-md-5 col-sm-5 col-md-pull-7">
    B
</div>

答案 5 :(得分:0)

这里被接受的答案错误地表示了order类的作用,这仅仅是控制flex容器内的可变项的顺序(通过CSS order属性)。它们不能完全替代push-*pull-*类的所有用法,但可以很好地用于重新排序列。

要完成您正在寻找的BS4类,您需要做:

<div class="col-sm-7 col-md-7 order-md-2">
    A, shows first on mobile, second on desktop
</div>
<div class="col-sm-5 col-md-5 order-md-1">
    B, shows second on mobile, first on desktop
</div>

根据BootStrap 4的migration docs。 另请参见CSS order property