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

Answer 3

更新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="/">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')

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

Answer 5

Thay被删除了。

使用float-left代替pull-left。而float-right代替pull-right。

检查bootstrap文档here：

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

Answer 6

2021 年更新，Bootstrap 5

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

我能够在项目

中使用以下类来完成此操作

d-flex justify-content-end

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

Answer 8

如果要在具有col-*类的其他工作中使用包含列的列，则可以使用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 9

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

Alex

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

Answer 10

bootstrap-4为浮动

添加浮动左或右的类

Answer 11

对于其他任何人而且只是罗伯特的补充，如果您的导航具有弹性显示值，您可以将您需要的元素浮动到右侧，方法是将其添加到其CSS中

.small{
    max-width: 10%;
    height: 100px;
    min-width: 10%!important;
}

.smallerImages{
margin: 0 auto;
}

#mainPicture{
width:  100%;
height: 600px;
display: table; margin: 0 auto;
}

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

11 个答案:

示例