How to Fix Gaps in Overfilled Bootstrap Rows?

Reducing Gaps in Overfilled Bootstrap Rows

Problem Analysis:

When designing a Bootstrap grid system for a portfolio, users may encounter situations where varying content lengths cause gaps in the grid layout. This occurs when an item in the grid has a height that exceeds its stacking breakpoint.

Solution Exploration:

To address this challenge, consider the following solutions:

1. Fixed Height: Assign a uniform height to all portfolio items.
2. Masonry Layout: Employ a dynamic adjustment technique to fit elements into available space.
3. Responsive Classes with Clearfix: Utilize Bootstrap's responsive classes along with media queries to clear floats after a specified number of elements in each row.
4. jQuery Height Adjustment: Dynamically adjust column heights using jQuery to ensure they match the maximum height.

Advanced Approaches:

Mini Clearfix:

Instead of using separate clear elements after each item, consider adding an extra div after each grid element and applying a mini clearfix to it using media queries. This approach avoids extra JavaScript and maintains markup readability.

<div class="row portfolio">
    <div class="...">...</div>
    <div class="clear"></div>
</div>

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(6n)::before {
        content: '';
        display: table;
        clear: both;
    }
}
...

jQuery Height Adjustment:

For a more dynamic approach, consider using jQuery to adjust column heights to match the maximum height:

var row=$('.portfolio');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('div[class^="col-"]'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('div[class^="col-"]'), function() {
        $(this).height(maxh);
    });
});

The above is the detailed content of How to Fix Gaps in Overfilled Bootstrap Rows?. For more information, please follow other related articles on the PHP Chinese website!