Weird floated blocks wrapping in bootstrap 3 col-* divs list

Basically I have bunch square of twitter-bootstrap col-md-x, col-sm-x divs one after another, to create list of images. It works almost flawlesly. Except that in some cases (which I could not figure out) it wraps last item to next row and previous item floats to the right. While from my best knowledge should float:left as it is stated in code?

Also:

  • All blocks have same height
  • Migration to v4 is no on option, as I have also 200 other widgets :)
  • nth selector will not works as number of columns depend on screen size

I've tried adding clearfixes inside blocks, as well rebuilding this all from inline-blocks. Also tried with table-like displays to no avail. Adding .rows is not an option, as it have different number of columns for different screen resolutions.

It works same way on latest FF and Chrome.

Code with blocks emptied for cleaner view, and only last block containing actual thumbnails code:

<div class="maslosoft-gallery-thumbs">
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">

        <figure class="figure img-thumbnail img-margins">
            <a class="maslosoft-gallery-image-url" href="?msg5a2edae509b0063972ebf09e.group=5a551849d0e0c30207d3bb79"
               title="" style="width: 50%">
                <img src="https://xn--masekowski-d0b.pl/asset/get/5a55174b09b0063676204b74/w/167/h/167/p/0/IMG_0961.jpg">
                <div class="img-thumbnail maslosoft-gallery-vertical-divider">
                </div>
                <div class="img-thumbnail maslosoft-gallery-horizontal-divider">
                </div>
                <div class="clearfix"></div>
            </a>
            <a class="maslosoft-gallery-image-url" href="?msg5a2edae509b0063972ebf09e.group=5a551849d0e0c30207d3bb79"
               title="" style="width: 50%">
                <img src="https://xn--masekowski-d0b.pl/asset/get/5a55183709b006f976dac73e/w/167/h/167/p/0/IMG_0962.jpg">
                <div class="img-thumbnail maslosoft-gallery-horizontal-divider">
                </div>
                <div class="clearfix"></div>
            </a>
            <a class="maslosoft-gallery-image-url" href="?msg5a2edae509b0063972ebf09e.group=5a551849d0e0c30207d3bb79"
               title="" style="width: 50%">
                <img src="https://xn--masekowski-d0b.pl/asset/get/5a55173c09b006cb73792f71/w/167/h/167/p/0/IMG_0960.jpg">
                <div class="img-thumbnail maslosoft-gallery-vertical-divider">
                </div>
                <div class="clearfix"></div>
            </a>
            <a class="maslosoft-gallery-image-url" href="?msg5a2edae509b0063972ebf09e.group=5a551849d0e0c30207d3bb79"
               title="" style="width: 50%">
                <img src="https://xn--masekowski-d0b.pl/asset/get/5a55174809b006177664196e/w/167/h/167/p/0/IMG_0954.jpg">
                <div class="clearfix"></div>
            </a>
            <div class="clearfix"></div>
        </figure>
        <div class="clearfix"></div>
    </div>
</div>

I don't know how to reproduce issue (to create fiddle). Issue can be seen here if You scroll to bottom.

I've also attached screenshot:

screenshot of issue

Please note that im offline for weekend and will not respond until monday.

1 answer

  • answered 2018-01-11 20:26 Bhuwan

    As I can see your code in your reference link, you have to set clear css property to the columns. Just paste below css in your code:

    .maslosoft-gallery-thumbs-group:nth-child(odd) {
        clear: left;
    }
    

    The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements.

    Clear CSS Documentation