web-dev-qa-db-ja.com

Bootstrap 4のプル左クラスとプル右クラスはどうなりましたか？

最新バージョンでは、プル左とプル右は.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"を書く必要があるということです。

それほど煩わしくない方法がありますか。

bootstrap-4
79
Kevin J

この質問が最初に尋ねられた2016年には、答えは次のとおりでした。

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

しかし今や受け入れられた答えはRobert Wentのものであるべきです。

6
Phillip Senn

これを見つける他の人のために：

クラスは現在float-rightfloat-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;
}
171
Robert Went

float-rightfloat-leftfloat-xx-leftとfloat-xxに変更

15
MAMADOU YAYA DIALLO

アップデート2018（ブートストラップ4.1以降）

はい、Bootstrap 4ではpull-leftとpull-rightがfloat-leftとfloat-rightに置き換えられました。

しかし、Bootstrap 4は現在flexboxなので、フロートはすべての場合に機能するわけではありません。

Flexboxの子を右に揃えるには、自動余白（ml-auto）またはflexbox utils（justify-content-end、align-self-endなど）を使用します。

例

Navs：

<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>
8
Zim

Thayが削除されました。

float-leftの代わりにpull-leftを使用してください。そしてfloat-rightの代わりにpull-right。

ここでブートストラップのドキュメント をチェックしてください ：

レスポンシブフロート用の.float- {sm、md、lg、xl} - {left、right、none}クラスを追加し、.pull-leftと.pull-rightは.float-leftと.float-と重複するので削除しました右。

5
Usama

col-*クラスを使った別の作品の中で、それらを列と一緒に使いたい場合は、order-*クラスを使うことができます。

順序クラスを使用して列の順序を制御できます。詳しくは Bootstrap 4のドキュメント をご覧ください。

ブートストラップドキュメントからの単純なもの：

<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>
4
Behnam Azimi

私のプロジェクトでは次のクラスでこれを行うことができました

d-flex justify-content-end

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

他に何も私のために働いていませんでした。これはやりました。これは誰かに役立つかもしれません。

<div class="clearfix">
  <span class="float-left">Float left</span>
  <span class="float-right">Float right</span>
</div>

すべてをclearfixdivで囲むことが重要です。

3
Ojas Kale

bootstrap-4追加クラスfloat-leftまたはright for floating

1
Arsalan Ahmad Khan