Bootstrap 4 引导程序4中的.pull left和.pull right类发生了什么？

在最新版本中，左拉和右拉已被.pull-{xs，sm，md，lg，xl}-{left，right，none}取代

这意味着我现在必须编写

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')

---

但是现在公认的答案应该是Robert Got的。

类是

右浮动

右浮动

等等

媒体查询首先是移动的，因此使用

float sm right

会影响小屏幕大小和任何更宽的内容，因此没有理由为每个宽度添加一个类。只需使用您想要影响的最小屏幕，或对所有屏幕宽度使用右浮动

官方文件：

课程：

更新：

如果要基于早期版本的引导更新现有项目，可以使用sass extend将规则应用于旧类名：

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

---

对于其他任何人来说，如果您的导航具有flex显示值，您可以将所需的元素向右浮动，方法是将其添加到css中

{
    margin-left: auto;
}

---

在我的项目中，我可以通过以下课程做到这一点

d-flex justify-content-end

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

d-flex内容结束

更改为

向右浮动

向左浮动

向左浮动xx

和

向右浮动xx

它们都被删除

使用

float left

代替

pull left

。 和

向右浮动

，而不是

向右拉

检查引导程序文档：

添加了.float-{sm，md，lg，xl}-{left，right，none}类，用于响应 浮动和移除。向左拉和向右拉，因为它们是多余的 到。向左浮动。向右浮动

---

如果您想在另一个使用

col-*

类的工作中使用带有列的，可以使用

order-*

类

可以使用order类控制列的顺序。在中查看更多信息

引导文档中的一个简单示例：

<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>

首先，但无序
第二，但最后
第三，但第一

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

更新2018（自bootstrap 4.1起）

是的，

向左拉

和

向右拉

在引导4中已被替换为

向左浮动

和

向右浮动

但是，浮动不会在所有情况下都起作用，因为引导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="/">Home</a></li>
    <li class="active"><a href="/">Link</a></li>
    <li class="ml-auto"><a href="/">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>

<div class="row">
    <div class="col-12">
       <button class="btn btn-primary float-end">Login</div>
    </div>
</div>

面包屑：

<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="/">Home</a></li>
    <li class="active"><a href="/">Link</a></li>
    <li class="ml-auto"><a href="/">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>

<div class="row">
    <div class="col-12">
       <button class="btn btn-primary float-end">Login</div>
    </div>
</div>

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

网格：

<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="/">Home</a></li>
    <li class="active"><a href="/">Link</a></li>
    <li class="ml-auto"><a href="/">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>

<div class="row">
    <div class="col-12">
       <button class="btn btn-primary float-end">Login</div>
    </div>
</div>

左边
赖特

其他任何东西都不适合我。这一个做到了。这可能对某人有所帮助

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

向左浮动
向右浮动

---

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

更新2021，引导程序5

在bootstrap 5中，这些类已重命名为

.float end

和

.float start

文件：

示例：

<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="/">Home</a></li>
    <li class="active"><a href="/">Link</a></li>
    <li class="ml-auto"><a href="/">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>

<div class="row">
    <div class="col-12">
       <button class="btn btn-primary float-end">Login</div>
    </div>
</div>

登录

.float-{sm，md，lg，xl}-{left，right，none}

现在浮动左/右/无，而

.pull left

和

.pull right

已被删除。pull right又回来了，但如果是这样的话，只需使用css

.pull right{@extend.pull xs right；}

这是2016年9月的答案。正确的答案是现在罗伯特走了。你似乎很难得到21票赞成一个刚刚被弃用的答案？“菲利普森考虑更新你的答案，这样你就不会因为成为一个团队球员而失去分数。看起来你还不太理解移动第一种方法。”code>.pull xs right会导致对象在所有屏幕大小上都向右浮动，因为css也会向上级联到较大的设备。另外，可能在较新的版本中有所更改，但您应该使用

.float right

而不是

.pull right

。相关文档：欢迎使用堆栈溢出！不幸的是，这篇文章似乎没有为这个问题提供答案。请编辑您的答案并尝试提供更多详细信息。这很有效。由于某种原因，

pull right

和

pull left

不能在

4.1

中的网格列上工作，这是正确的。由于行现在使用flexbox，因此顺序是重新创建推/拉行的方式。您有2个内联项，因此它们需要位于块元素中，以便相对于其兄弟项浮动。ml-auto正是我在导航栏中需要的。这里还有用于此

ml auto

和

mr auto