反向拉 - * - Bootstrap 4 [重复]

Question

这个问题在这里已有答案：

• What happened to the .pull-left and .pull-right classes in Bootstrap 4? 10个答案

拉不右或左拉，我做错了什么？

代码本身

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <section class="col-sm-9 pull-right" style="background: olive;">
      <article>content</article>
    </section>

    <section class="col-sm-3 pull-left" style="background: #008040;">
      <aside>Widgets</aside>
    </section>
  </div>
</div>

Answer 1

Bootstrap 4中没有pull-right和pull-left。 它不再使用float，它使用flex。

你有两个div，你试图通过使用float来改变它们的顺序，你可以简单地在HTML中反转它们的位置：

<section class="col-sm-3" style="background: #008040;">
    <aside>Widgets</aside>
</section>
<section class="col-sm-9" style="background: olive;">
    <article>content</article>
</section>

如果你想保持他们在HTML中的位置并反正它们，你可以使用flex-order：

<section class="col-sm-3 order-1" style="background: #008040;">
    <aside>Widgets</aside>
</section>
<section class="col-sm-9 order-0" style="background: olive;">
    <article>content</article>
</section>

Doc：https://getbootstrap.com/docs/4.0/layout/grid/