bootstrap5中如何使用push pull？

Question

我想在 Bootstrap v5.0.0-beta2 中使用推、拉，但是如何？

在Bootstrap3中，我是这样使用的：

<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

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

提前致谢。

Answer 1

Push/pull是一种网格技术。现在不赞成使用 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>

bootstrap5中如何使用push pull？

How to use push pull in bootstrap 5?

html

javascript

twitter-bootstrap

bootstrap-5