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

Question

在最新版本中,左拉和右拉已被替换为.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"

有一个不那么乏味的方法吗？

Answer 1

对于其他人发现这个:

课程目前float-right float-sm-right等.

媒体查询首先是移动的,因此使用float-sm-right会影响小屏幕尺寸和更宽的范围,所以(目前)没有理由为每个宽度添加一个类.只需使用您想要影响的最小屏幕或float-right所有屏幕宽度.

官方文件:

课程:https://getbootstrap.com/docs/4.0/utilities/float/

更新:https://getbootstrap.com/docs/4.0/migration/#utilities

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

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

Answer 2

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

Answer 3

更新2018年(自Bootstrap 4.1起)

是的,pull-left和pull-right已被替换float-left,并float-right在引导4.

但是,浮动在所有情况下都不起作用,因为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="/">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>

Answer 4

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

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

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

Answer 5

Thay被删除。

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

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

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

Answer 6

如果要在具有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>

Answer 7

没有其他东西对我有用。这个做到了。这可能会帮助某人。

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

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

Answer 8

2021 年更新，Bootstrap 5

在引导程序 5 中，这些类已重命名为.float-end和.float-start。

文档：https : //getbootstrap.com/docs/5.0/utilities/float/

例子：

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