Bootstrap 4の.pull-leftクラスと.pull-rightクラスはどうなりましたか？

最新バージョンでは、プルレフトとプルライトが.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"

退屈な方法はありますか？

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

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

しかし今、受け入れられた答えはロバートウェントのものでなければなりません。

クラスはfloat-right float-sm-right等々です。

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

公式ドキュメント：

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

更新：https : //getbootstrap.com/docs/4.4/migration/#utilities

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

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

2018年更新（Bootstrap 4.1以降）

はい、pull-leftとpull-rightに置き換えられているfloat-leftとfloat-rightブートストラップ4で。

ただし、Bootstrap 4がflexboxになったため、フロートはすべてのケースで機能するわけではありません。

：ALIGNフレキシボックスの子どもの権利、使用自動マージン（すなわちへml-autoまたはフレキシボックス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="https://stackoverflow.com/">Home</a></li>
    <li class="active"><a href="https://stackoverflow.com/">Link</a></li>
    <li class="ml-auto"><a href="https://stackoverflow.com/">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>

に変更さfloat-right float-left float-xx-leftれましたfloat-xx-right

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>

除かれます。

のfloat-left代わりに使用しますpull-left。そしてのfloat-right代わりにpull-right。

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

.float- {sm、md、lg、xl}-{left、right、none}クラスをレスポンシブフロートに追加し、.pull-leftと.pull-rightを削除しました。これらは.float-leftと.float-に冗長であるためです。正しい。

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

d-flex justify-content-end

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

他には何もうまくいきませんでした。これはしました。これは誰かを助けるかもしれません。

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

clearfix divですべてをラップすることが重要です。

bootstrap-4フローティング用のクラスfloat-leftまたはrightを追加します

他の誰にとっても、ロバートへの追加だけで、ナビゲーションにフレックス表示値がある場合、CSSにこれを追加することで、必要な要素を右にフロートできます。

{
    margin-left: auto;
}