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

Question

在最新版本中，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"

而不是简单的 class="pull-right"

有没有更简单的方法？

Answer 1

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

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

但现在接受的答案应该是 Robert Went 的。

Answer 2

Bootstrap 4

class是float-rightfloat-sm-right等

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

官方文档：

类: https://getbootstrap.com/docs/4.6/utilities/float/

更新中：https://getbootstrap.com/docs/4.6/migration/#utilities

如果您正在更新基于早期版本 Bootstrap 的现有项目，您可以使用 sass 扩展将规则应用到旧的 class 名称：

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

Bootstrap 5

和Bootstrap5一样，floatclass仍然存在，但是-left和-right被-start和-end代替了。

响应式版本仍然可用，例如 .float-md-start、.float-lg-none。

官方 Bootstrap 5 个浮动文档：https://getbootstrap.com/docs/5.1/utilities/float/

Answer 3

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

{
    margin-left: auto;
}

Answer 4

我能够在我的项目

中使用以下类来做到这一点

d-flex justify-content-end

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

Answer 5

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

Answer 6

他们被删除了。

使用 float-left 而不是 pull-left。 float-right 而不是 pull-right.

检查 bootstrap 文档 here:

Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.

Answer 7

如果你想在另一个使用 col-* 类的作品中使用带有列的那些，你可以使用 order-* 类。

您可以使用 order 类控制列的顺序。在 Bootstrap 4 documentation

中查看更多内容

来自 bootstrap 文档的简单说明：

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

bootstrap-4 add class float-left or right for floating

Answer 9

2021 年更新（截至 Bootstrap 5）

由于新的 RTL 支持，float-left 和 float-right 在 Bootstrap 中已替换为 float-start 和 float-end 5.

2018 年更新（截至 Bootstrap 4.3）

是的，pull-left 和 pull-right 在 Bootstrap 中被替换为 float-left 和 float-right 4.

但是，floats 并非在所有情况下都有效，因为 Bootstrap 4 现在是 flexbox.

要使 flexbox 子项右对齐，请使用自动边距（即：ml-auto）或 flexbox 实用程序（即：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 10

没有别的东西对我有用。这个做到了。这可能对某人有帮助。

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

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

Answer 11

2021 年更新，Bootstrap5

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

Answer 12

bootstrap5 (2021) 中的订单已替换为订单-X

<div class="row">
    <div class="col">
         Child 1
    </div>
    <div class="col">
         Child 2
    </div>
    <div class="col">
         Child 3
    </div>
</div>

自然与视觉秩序请注意，列的自然顺序是：

|---1----|---2---|---3---|

使用灵活排序 CSS 类我们可以更改列的视觉顺序...

    <div class="row">
          <div class="col order-2"> Child 1 </div>
          <div class="col order-1"> Child 2 </div>
          <div class="col order-3"> Child 3 </div>
    </div>
<!-- Or the belo style if you are using responsive utility
<div class="row">
    <div class="col border order-lg-3"> Child Responsive 1 </div>
    <div class="col border order-lg-2"> Child Responsive 2 </div>
    <div class="col border order-lg-1"> Child Responsive 3 </div>
</div>

|---2----|---1---|---3---|

Answer 13

我不是 Bootstrap 专家，所以可能有更好的方法来做到这一点，但在尝试了这里的大部分答案后，我没有得到任何这些解决方案，我做了以下：

<div class="row">
<p class="small-text col-lg-4 text-lg-start text-center">© 2021 MyCompany</p>
<p class="small-text col-lg-4 text-lg-center text-center">All trademarks used on this site are the property of their respective owners.</p>
<p class="small-text col-lg-4 text-lg-end text-center">Terms & Conditions | Privacy Policy</p>
</div>

对于所有小于大的视口，这会将每个视口折叠到自己的行并居中对齐文本。

对于所有大视口和更高，它会将每个视口平均分布在一行中并相应地对齐文本。

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

What happened to the .pull-left and .pull-right classes in Bootstrap 4?

bootstrap-4

Bootstrap 4

Bootstrap 5

例子

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