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

小开

最佳答案

回到2016年，当这个问题最初被提出时，答案是:

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

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

小开

鞋带4

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

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

官方文件:

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

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

如果根据早期版本的 Bootstrap 更新现有项目，可以使用 sass 扩展将规则应用于旧的类名:

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

鞋带5

在 Bootstrap 5中，浮点类仍然存在，但是 -left和 -right被 -start和 -end所取代。

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

官方引导5浮动文档: https://getbootstrap.com/docs/5.2/utilities/float/

小开

如果你的导航有 Flex 的显示值，你可以把你需要的元素浮动到右边，把这个元素添加到它的 css 中

{
margin-left: auto;
}

小开

在我的项目中，我可以用下面的类做到这一点

d-flex justify-content-end


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

小开

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

小开

他们被移除了。

使用 float-left代替 pull-left。和 float-right而不是 pull-right。

检查引导文档给你:

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

小开

如果希望在另一个 col-*类中使用带有列的类，可以使用 order-*类。

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

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

小开

Bootstrap-4添加类 float-浮动的向左或向右

小开

更新2021(从 Bootstrap 5开始)

由于新的 RTL 支持，float-left和 float-right已经在 Bootstrap 5中被 float-start和 float-end所取代。

2018年更新(自举4.3)

是的，在引导程序4中，pull-left和 pull-right已经被 float-left和 float-right取代。

但是，漂浮物不会在所有情况下工作，因为 Bootstrap 4现在是 弹簧箱。

使用自动边距(例如: ml-auto)或者柔性盒实用工具(例如: 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="clearfix">
<span class="float-left">Float left</span>
<span class="float-right">Float right</span>
</div>

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

小开

2021年更新，启动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>

小开

引导程序5(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—— |

小开

我不是 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>

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

对于 所有大视图和更高视图，它会将每个字符平均分布在一个单独的行上，并相应地对齐文本。