Bootstrap 4中的.pull-left和.pull-right类发生了什么？

在最新版本中，左上拉和右上拉已替换为.pull- {xs，sm，md，lg，xl}-{left，right，none}

这意味着class="pull-right"我现在不必写简单的东西了class="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

有没有那么乏味的方法呢？

早在2016年最初提出此问题时，答案是：

$('.pull-right').addClass('pull-xs-right').removeClass('pull-right')

但是现在公认的答案应该是罗伯特·温特的。

类是float-right float-sm-right等等

媒体查询是移动优先的，因此使用float-sm-right会影响较小的屏幕尺寸和更宽的屏幕，因此没有理由为每个宽度添加一个类。只需使用要影响的最小屏幕或float-right所有屏幕宽度即可。

官方文件：

类别：https：//getbootstrap.com/docs/4.4/utilities/float/

更新：https：//getbootstrap.com/docs/4.4/migration/#utilities

如果要基于较早版本的Bootstrap更新现有项目，则可以使用sassextend将规则应用于旧类名称：

.pull-right {
    @extend .float-right;
}
.pull-left {
    @extend .float-left;
}

2018年更新（自Bootstrap 4.1起）

是的，pull-left并且pull-right已在Bootstrap 4中被float-left和取代float-right。

但是，由于Bootstrap 4现在是flexbox，所以浮点数在所有情况下均不起作用。

要将flexbox子级向右对齐，请使用自动边距（即ml-auto：）或flexbox utils（即：justify-content-end，align-self-end，等）。

例子

导航：

<ul class="nav">
   <li><a href class="nav-link">Link</a></li>
   <li><a href class="nav-link">Link</a></li>
   <li class="ml-auto"><a href class="nav-link">Right</a></li>
</ul>

面包屑：

<ul class="breadcrumb">
    <li><a href="https://stackoverflow.com/">Home</a></li>
    <li class="active"><a href="https://stackoverflow.com/">Link</a></li>
    <li class="ml-auto"><a href="https://stackoverflow.com/">Right</a></li>
</ul>

https://www.codeply.com/go/6ITgrV7pvL

格：

<div class="row">
    <div class="col-3">Left</div>
    <div class="col-3 ml-auto">Right</div>
</div>

更改为float-right float-left float-xx-left和float-xx-right

如果要在具有col-*类的其他工作中将其与列一起使用，则可以使用order-*类。

您可以使用订单类控制列的顺序。看到更多 Bootstrap 4文档中信息

一个简单的引导文档：

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Thay被删除。

使用float-left代替pull-left。并且float-right代替pull-right。

在此处查看引导程序文档：

为响应浮动添加了.float- {sm，md，lg，xl}-{left，right，none}类，并删除了.pull-left和.pull-right，因为它们对.float-left和.float-是多余的对。

我能够在我的项目中的以下课程中做到这一点

d-flex justify-content-end

<div class="col-lg-6 d-flex justify-content-end">

没有别的为我工作。这个做了。这可能会帮助某人。

<div class="clearfix">
  <span class="float-left">Float left</span>
  <span class="float-right">Float right</span>
</div>

在clearfix div中包装所有内容是关键。

bootstrap-4添加类float-left或right进行浮动

对于其他任何人，除了Robert之外，如果您的导航具有flex显示值，则可以通过将其添加到其CSS中来浮动所需的元素

{
    margin-left: auto;
}