☰

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

tag-icon • tag-icon bootstrap-4
What happened to the .pull-left and .pull-right classes in Bootstrap 4? Ask Question

In the newest version the pull-left and pull-right have been replaced by .pull-{xs,sm,md,lg,xl}-{left,right,none}

That means that instead of writing a simple class="pull-right", I will have now to write class="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

Is there a less tedious way to do it?

ベストアンサー1

Bootstrap 4

The classes are float-right float-sm-right etc.

メディア クエリはモバイル ファーストなので、 を使用すると小さい画面サイズやそれより広い画面に影響します。そのため、幅ごとにクラスを追加する理由はありません。影響する最小の画面、またはすべての画面幅にfloat-sm-right使用してください。float-right

公式ドキュメント:

クラス：https://getbootstrap.com/docs/4.6/utilities/float/

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

以前のバージョンの Bootstrap に基づいて既存のプロジェクトを更新する場合は、 sass extend を使用して、古いクラス名にルールを適用できます。

.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/

おすすめ記事