嘿，这个问题我太熟了——Bootstrap 4 彻底重构了浮动与对齐相关的工具类，这就是你用旧的 pull-* 类不管用的核心原因！下面给你拆解问题和解决办法：

1. 核心问题：类名被废弃了 #

Bootstrap 4 直接移除了 Bootstrap 3 里的 pull-left 和 pull-right 类，替换成了更语义化的浮动类：

• 原来的 pull-left → 现在用 float-left
• 原来的 pull-right → 现在用 float-right
• 如果需要取消浮动，用 float-none

举个简单的替换例子：

<!-- Bootstrap 3 写法（Bootstrap 4 中无效） -->
<div class="pull-left">左侧内容</div>
<div class="pull-right">右侧内容</div>

<!-- Bootstrap 4 有效写法 -->
<div class="float-left">左侧内容</div>
<div class="float-right">右侧内容</div>

2. 容易踩坑：Flex 布局的干扰 #

如果你的元素父容器用了 Bootstrap 4 的 flex 类（比如 d-flex），那不管是旧的 pull-* 还是新的 float-* 都会失效——因为 flex 容器内的子元素默认遵循 flex 布局规则，浮动属性会被忽略。

这时候要改用 flex 专属的对齐工具类：

• 要让容器内元素两端对齐，给父容器加 justify-content-between
• 要把单个元素推到右侧，给该元素加 ml-auto（margin-left:auto，自动填充左侧空间）
• 要把单个元素推到左侧，给该元素加 mr-auto

示例代码：

<!-- Flex 容器下的两端对齐 -->
<div class="d-flex justify-content-between">
  <div>左侧内容</div>
  <div>右侧内容</div>
</div>

<!-- Flex 容器下单独把元素推到右侧 -->
<div class="d-flex">
  <div>左侧内容</div>
  <div class="ml-auto">右侧内容</div>
</div>

3. 关于「reverse pull-*」的替代 #

Bootstrap 4 里没有专门的「reverse pull-*」类，但可以通过响应式类实现不同屏幕尺寸下的反向浮动：

• 比如移动端左浮、桌面端右浮：float-sm-left float-md-right
• 如果是 flex 布局，用响应式的 justify-content 类：justify-content-sm-start justify-content-md-end

快速排查清单 #

最后给你列个排查步骤，快速定位问题：

• 检查是不是把 Bootstrap 3 的类用到了 Bootstrap 4 项目里
• 查看元素的父容器有没有用 d-flex 或其他 flex 相关类，有的话改用 flex 对齐工具
• 确认没有自定义 CSS 覆盖了浮动或 flex 相关属性

内容的提问来源于stack exchange，提问作者Позитив онлайн