引导程序v4推拉不见了 [英] bootstrap v4 push pull gone

问题描述

查看bootstrap v4更新:

Looking at bootstrap v4 updates:

https://getbootstrap.com/docs/4.0/migration/#grid-system-1

...为新的以flexbox为动力的订单类拖放了push和pull修饰符类.例如，您将使用.col-8.order-2和.col-4.order-1，而不是.col-8.push-4和.col-4.pull-8.

...Dropped push and pull modifier classes for the new flexbox-powered order classes. For example, instead of .col-8.push-4 and .col-4.pull-8, you’d use .col-8.order-2 and .col-4.order-1.

但是当我使用order函数时，它似乎与push pull方法的工作方式不同.像下面代码中的第一行一样，将行堆叠起来.

But when I use the order function it doesn't seem to work the same as the push pull method. It stacks the rows up just like the first row in the code below.

我的目标是在桌面上在左侧具有img的文本在右侧，然后在左侧具有文本的img和在右侧的img在另一行.当它在较小的屏幕中调整大小时，我希望每个图像都堆叠在与之相对应的文本上方.

My goal is to have a img on the left with text on the right on one row then text on the left and a img on the right on the next row on a desktop. When its resized in a smaller screen I would like each image stacked on top of the text it corresponds with.

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!--img-->
        </div>
        <div class="col-md-8">
            <!--text-->
        </div>
    </div>
        <div class="row">
            <div class="col-md-8 order-2">
                <!--text-->
            </div>
            <div class="col-md-4 order-1">
                <!--img-->
            </div>
        </div>
</div>

推荐答案

例如，如果您想更改 md 上的订单，则可以为该尺寸定义第一个常规订单，然后再定义 order-n (适用于所有较小的尺寸).因此您的代码应如下所示.

If you want to change order for example on md you can define first normal order for that size and then order-n for all smaller sizes. So your code should look like this.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-md-4">
      img
    </div>
    <div class="col-md-8">
      text
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 order-2 order-md-1">
      text
    </div>
    <div class="col-md-4 order-1 order-md-2">
      img
    </div>
  </div>
</div>

这篇关于引导程序v4推拉不见了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！