YoroDiallo YoroDiallo - 4 months ago 8
CSS Question

build a downloadable content in 3 columns

I take responce from JSON and wanna to paste it in 3 columns. I'm using bootstrap class

col-md-4
and angularjs as framework.. I want to line up 3 elements in a row, but when content is too big - it breaks down and looks like :
enter image description here

See the following plnkr (view in fullscreen)

Answer

The problem is bootstrap 3 uses floats, therefore in order for the columns to stay aligned correctly when they are different heights, you need to put a dummy clearfix in there.

Bootstrap Clearfix

An optional things you can do is also wrap every row in a 'row' lol. So in your case every three columns should be wrapped in their own div with a class of row.

Both these solutions produce problems in ng-repeat because you have to group your data by the number of columns you want and then nest the repeat again. Someone out there might have a better solution.

Like charlietfl suggested above, the least frustrating thing to do is use flexbox instead. You can write the css yourself or switch to bootsrap 4, but the catch is that support in IE is not the best.

You can also rewrite the columns css to use inline block instead of floats, but at that point what's the point of using bootstrap =P

.col-4 {
  width: 32%;
  display:inline-block;
  margin-bottom: 10px;
  vertical-align: top;
}

.col-4:nth-of-type(3n-1) {
  margin-left: 2%;
  margin-right: 2%;
}

Like so