Bootstrap 4 aligning floats without clearfix

Question

However, as you can see, Bootstrap didn't properly align the div boxes together. There's a lot of blank spaces in between the boxes sometimes, which we doubt is caused by clearfix.

So is there any way for us to get the proper 'float' aligning with each div box having the same spacing to the top? However, we can't really use the method of multiple 'row' divs or having clearfix divs in between because we're using VueJS's two-way for binding to render the page, which cannot count the times of iteration.

EDIT: Bootstrap grid with different image heights didn't solve this problem.

    @media (min-width: 768px) {
    .row > .col-md-6:nth-child(2n+1) {
        clear: left;
     }
    }

didn't solve the problem, nor can we use the clearfix class because of the foreach loop used to generate html.

You should recreate this in a simple example such as JSfiddle or Bootply — Carol Skelly, Jun 27 '16 at 20:59

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

I answered a similar question here. It is a clearfix issue.

You need to use Bootstrap's clearfix resets, or CSS to reset the floats every X columns.

edited May 23 '17 at 11:58

Community

1
1

answered Jun 27 '16 at 20:55

Carol Skelly

351,302
90
710
624

I kind of know that it's clearfix-oriented, but applying your method doesn't fix it. I'm still trying to see whether I have some grammar issue – BearAqua Jun 28 '16 at 03:10
The code from the other question won't specifically work in your case because it's for col-md-6 every 2, but it general CSS clear will work. You need to simplify the question w/o all of the Vue stuff. – Carol Skelly Jun 28 '16 at 11:04

score 0 · Answer 2 · answered Jun 27 '16 at 20:33

0

Try giving your class="col-xs-6 col-sm-4 col-md-4 col-lg-3" set height of the highest div.

answered Jun 27 '16 at 20:33

Vcasso

1,328
1
8
14

Bootstrap 4 aligning floats without clearfix

2 Answers2