Why does column-count break bootstrap?

Question

I want to merge this layout with bootstrap:

(here the columns are balanced nice without gaps, something I can't get done with bootstrap (maybe it is possible, if so let me know).

The problem now is that as soon as I start using column-count, the layout seems to break.

.foo {
  -webkit-column-count: 3; Chrome, Safari, Opera
  -moz-column-count: 3; Firefox
  column-count: 3;
}

(check right side of image)

Why does that happen?

Unsure if this is contributing to it, but the "Chrome, Safari, Opera" etc. is outside of comments, so it's interrupting the code. Make sure it's prefixed with `/*` and affixed with `*/`. — Gavin Thomas, Apr 20 '16 at 15:17

score 3 · Accepted Answer · answered Apr 20 '16 at 15:22

3

Try adding the following to .foo, after the column-count rules.

.foo {
  …
  display: inline-block;
}

answered Apr 20 '16 at 15:22

Andy Hoffman

score 0 · Answer 2 · answered Apr 20 '16 at 15:27

0

You must specify the width of the column in mobile size. You have content col-lg-8 class, so you can add the col-xs-12 class.

<div class="content col-xs-12 col-lg-8">
    <div class="foo">
    [...]
    </div>
</div>

answered Apr 20 '16 at 15:27

Garric

2 Answers2