如何在引导程序 5 中使用推拉？

Question

我想使用push，pull Bootstrap v5.0.0-beta2，但是怎么做呢？

在 Bootstrap 3 中，我是这样使用它的：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

我试过了。但我不能。这是我的JSFiddle

在 Bootstrap V5 中，如何使用 push 和 pull？ 请帮忙。

提前致谢。

Answer 1

推/拉是一种网格技术。现在不推荐使用这种方式，取而代之的是 flex。 对于 flex，辅助类是 .order-。请参阅 BS5 Columns 文档。

您可以使用全局排序：

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

或特定于屏幕尺寸...即.order-sm-*、.order-lg-*，等等。

如果你只是想换班，那就用Offsetting Columns

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

编辑：

在您的情况下，您可以使用：

<div class="row">
  <div class="col-md-9 order-last">.col-md-9 <del>.col-md-push-3</del><ins>order-last</ins></div>
  <div class="col-md-3 order-first">.col-md-3 <del>.col-md-pull-9</del><ins>order-first</ins></div>
</div>

或：

<div class="row">
  <div class="col-md-9 order-2">.col-md-9 <del>.col-md-push-3</del><ins>order-2</ins></div>
  <div class="col-md-3 order-1">.col-md-3 <del>.col-md-pull-9</del><ins>order-1</ins></div>
</div>