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

Bootstrap 4 での列間の空の垂直方向のスペースの処理

Bootstrap 4 で列を操作するときによくある問題の 1 つは、列間に空の垂直方向のスペースが存在することです (特に、より大きなビューポート。これは、Bootstrap 4 が列の高さを揃えるフレックスボックス レイアウトを実装しているために発生する可能性があります。

動作を理解する

フレックスボックス レイアウトでは、行内のすべての列が最も高い列と同じ高さになります。カラム。たとえば、高さの異なる 3 つの柱がある場合、2 つの短い柱は垂直に伸びて、最も高い柱の高さに一致します。その結果、空のスペースが表示されます。

解決策: Float の使用

列をネストすると望ましい列の順序が崩れる可能性があるため、Bootstrap 4 の解決策は float を使用することです。これは、列が隣り合って浮動するブートストラップ 3 の動作を模倣しています。

空の垂直スペースを削除するには、次の CSS を使用できます。

.container {
  .row {
    display: block !important;
    .col {
      float: left;
    }
  }
}

このコードは、デフォルトのフレックスボックス レイアウトを使用し、行の表示プロパティをブロックに設定します。さらに、列の float プロパティを left に設定し、列を隣り合わせてフローティングできるようにします。

実装例

これは、float を使用して空の垂直スペースを削除する HTML 構造の例です。 :

<div class="container">
  <div class="row d-lg-block">
    <div class="col-lg-9 float-left description">...</div>
    <div class="col-lg-3 float-right sidebar">...</div>
    <div class="col-lg-9 float-left comments">...</div>
  </div>
</div>

float を利用することで、垂直方向の空のスペースが表示されるのを防ぎ、大きなサイズであっても望ましい列の順序を維持できます。ビューポート。

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