Bootstrap 4 で列間の垂直方向の空きスペースを回避するにはどうすればよいですか?

ブートストラップ 4 の列間の空の垂直スペース

ブートストラップ 4 ではフレックスボックスが導入され、その結果、列は最も高い列と同じ高さを共有します。これにより、特定のシナリオでは列間に望ましくない空のスペースが作成されます。

フレックスボックスの配置と空のスペース

次の点を考慮してください:

• 列 A:説明 (縦)
• 列 B: サイドバー(短い)
• 列 C: コメント (縦)

フレックスボックスは列を垂直方向に整列させ、結果は次のようになります:

------------------  ---------
|                  ||         |
|                  ||         |
------------------ |         |
------------------ |         |
|                  ||         |
------------------  ---------

しかし、私たちは次のことを望んでいます:

------------------  ---------
|                  |
 ------------------  
|                  |
 ------------------ |         |
|                  ||         |
 -------------------  ---------

として浮遊します回避策

Bootstrap 3 ではフロートを使用しており、列をフロートにして必要なスペースのみを占有することができます。 Bootstrap 4 でこれを実現するには:

<div>

d-lg-block クラスは行に display:block を強制し、大きな画面上で列をフローティングできるようにします。

ネストとOrder Preservation

次のように列をネストすると、次のように見えるかもしれません。解決策:

<div>

ただし、これにより列の順序が損なわれます。上の例では、ネストされた行の自動レイアウトにより、サイドバーは小さな画面では最後に表示されます。

以上がBootstrap 4 で列間の垂直方向の空きスペースを回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。