How to Eliminate Vertical Spacing in Bootstrap 4 Columns?

Eliminating Vertical Spacing in Bootstrap 4 Columns

In Bootstrap 4, columns with differing heights tend to align vertically, resulting in empty space between them. This occurs because Bootstrap 4 utilizes flexbox, causing columns to conform to the height of the tallest column.

To counteract this issue, you can employ floats, a workaround similar to Bootstrap 3. Here's an updated HTML structure:

<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>

In this example, the "d-lg-block" class sets "display:block" on the row in large screens, allowing the columns to float instead of being flexed. By using floats, you can control the column order while preventing excessive vertical spacing.

The above is the detailed content of How to Eliminate Vertical Spacing in Bootstrap 4 Columns?. For more information, please follow other related articles on the PHP Chinese website!