2017-10-04 5 views
0

まずは、私の悪い英語の大きな謝罪。ブートストラップでオフセットを作成する方法4

私はブートストラップバージョン4ベータ版(最新ではないアルファ)を​​使用しています。それは良いです。しかし、私は、ブートストラップの新しいバージョンでは、オフセットクラスを削除したのだろうかと思います。誰かが私に解決策を教えてくれて感謝します。どのようにしてflexboxを使ってオフセットを作ることができますか?私が.col-offset-2を使用する前に、これはオフセット2列を意味しています。フレックスボックスでこれを欲しがります。ありがとうございます

答えて

0

オフセットはml - ** - autoに置き換えられます。

以下のコードは、サイズが3のオフセットとMDよりも小さいサイズの12が、9なりMD及び高い..私はMD内部mlで置かれているので - ** - オート

<div class="col-12 col-md-9 ml-md-auto"> 
     test 
    </div> 

参照をここhttps://v4-https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

公式ドキュメントはまた、ブートストラップオフセットクラスは余裕クラスによって置き換えてきた4 Offsetting columns is not working (Bootstrap v4.0.0-beta)

0

で作品を相殺する方法にもここで本当に良い答えがあります。これらは、の余白 - 右の接頭辞mr-の余白 - 左ml-の接頭辞です。これが効果的にプッシュする「と言って、この限りすることができますとして残して、あなたのCSSにmargin-left: autoを設定するのと同じです -

documentation

は、(例えば、LGやMD。*ターゲットの解像度がある) ml-*-autoの使用方法を示しています" ml-*-automr-*-autoの両方を使用すると、効果的に列を中央に配置できます。

これはautoプロパティの接頭辞の完全なリストは、次のとおりです。

  • ml-マージン左
  • mr-マージン右
  • mb-マージン下
  • mt-マージントップ
  • mx-水平マージン(余白左余白)
  • my-垂直マージン(余裕トップ+マージン下)
  • m-すべてのマージンautoに加えて

、あなたが列幅を指定することができます - などml-lg-2

のでcol-offset-2、(私は思う)2つのスペースを残してコンテンツを押してくださいml-2またはml-lg-2のようなものに相当します。

関連する問題