CODEWITHSUNDEEP
csstwitter-bootstrapcolumn-count
clankill3r
clankill3r

Reputation: 9543

Why does column-count break bootstrap?

I want to merge this layout with bootstrap:

https://jsfiddle.net/clankill3r/j9hj8rw8/

enter image description here

(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) enter image description here

Why does that happen?

https://jsfiddle.net/clankill3r/t528eozd/4/

Upvotes: 0

Views: 1633

Answers (2)

Garric
Garric

Reputation: 552

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>

JSFiddle

Upvotes: 0

Andy Hoffman
Andy Hoffman

Reputation: 19109

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

.foo {
  …
  display: inline-block;
}

Upvotes: 3

Related Questions