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

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

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

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

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

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

フレックスボックスは列を垂直方向に配置し、次のようになります。

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

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

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

回避策としてフロートを使用

ブートストラップ 3 ではフロートを使用し、列をフローティングにして占有するのは彼らが必要とするスペース。 Bootstrap 4 でこれを実現するには:

<div>

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

ネストと順序の保持

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

<div>

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

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