bootstrap-4 - 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- 而不是编写简单的 class="pull-right" lg-右拉-sm-右拉-xs-右"

有没有更简单的方法来做到这一点？

Answer 1

Bootstrap 4

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

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

官方文档:

类(class):https://getbootstrap.com/docs/4.6/utilities/float/

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

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

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

引导5

在 Bootstrap 5 中， float 类仍然存在，但 -left 和 -right 被替换为 -start 和 -end .

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

官方 Bootstrap 5 float 文档:https://getbootstrap.com/docs/5.2/utilities/float/