Bootstrap 4 列の垂直方向の間隔を削除するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-11-10 12:30:02

オリジナル

815 人が閲覧しました

How to Eliminate Vertical Spacing in Bootstrap 4 Columns?

Bootstrap 4 列の垂直方向の間隔をなくす

Bootstrap 4 では、高さの異なる列が垂直方向に整列する傾向があり、その結果、列間に空きスペースが生じます。。これは、Bootstrap 4 がフレックスボックスを使用しており、列が最も高い列の高さに一致するために発生します。

この問題に対処するには、Bootstrap 3 と同様の回避策であるフロートを使用できます。更新された HTML 構造は次のとおりです。

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

ログイン後にコピー

この例では、「d-lg-block」クラスが大きな画面の行に「display:block」を設定し、列がフレックスされるのではなくフローティングになるようにします。 float を使用すると、過剰な垂直方向のスペースを防ぎながら列の順序を制御できます。

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