Breaks when using Twitter Bootstrap

Question

Breaks when using Twitter Bootstrap

kristianmandrup opened this issue 12 years ago · comments

When using Twitter Bootstrap, the masonry and isotope calculations seem to break down for some reason. If anyone has a solution to this, please let me know!!! :)

Kristian Mandrup commented 8 years ago

Thanks :)

Kristian Mandrup · Answer 1 · Mon Dec 17 2012 03:40:44 GMT+0800 (China Standard Time)

Yeah, please tell me ;)

Hendrik Roth · Answer 2 · Wed Feb 13 2013 04:59:58 GMT+0800 (China Standard Time)

Removing "container-fluid" helps.

AP · Answer 3 · Fri Aug 02 2013 06:31:47 GMT+0800 (China Standard Time)

Did you ever get masonry-rails to work with https://github.com/seyhunak/twitter-bootstrap-rails

Also, will you be supporting Bootstrap 3?

Kristian Mandrup · Answer 4 · Sat Aug 03 2013 01:31:01 GMT+0800 (China Standard Time)

As I understand it, twitter bootstrap is mainly a CSS skin engine, using CSS classes. Any conflict is most likely due to clashes with reserved TS CSS ids or classes. Try to tweak the ones masonry uses by default and I think you should be able to avoid the conflicts.

vijay koogu · Answer 5 · Sat Aug 03 2013 01:51:12 GMT+0800 (China Standard Time)

nop its not working in that way either... :(

AP · Answer 6 · Sat Aug 03 2013 01:59:51 GMT+0800 (China Standard Time)

@vjaykoogu Can you put a JSFiddle of what you see as a problem?

Kevin Holler · Answer 7 · Tue Oct 15 2013 21:47:52 GMT+0800 (China Standard Time)

I can confirm that I've gotten this working with Bootstrap 3. Is anyone still having issues?

AP · Answer 8 · Tue Oct 15 2013 21:58:22 GMT+0800 (China Standard Time)

@kevinholler Can you make a quick demo and link us to the repo? That would be really great!

Kristian Mandrup · Answer 9 · Wed Oct 16 2013 01:02:18 GMT+0800 (China Standard Time)

I'm not maintaining this gem at the moment (too busy with Node etc). Please feel free to add examples/demos to an examples folder, update the README and patch with any fixes necessary ;) Thanks!

Kevin Holler · Answer 10 · Wed Oct 16 2013 01:16:15 GMT+0800 (China Standard Time)

@kristianmandrup @akshatpradhan I'll look into this more over the weekend and will update 👍

AP · Answer 11 · Thu Oct 17 2013 22:06:11 GMT+0800 (China Standard Time)

@kevinholler Actually, can you send a PR with a examples/ folder and update the README as well? That would be great and we can merge it in.

Judah Meek · Answer 12 · Tue May 17 2016 10:53:28 GMT+0800 (China Standard Time)

This issue can likely be closed. A friend of mine was able to use this gem with Bootstrap (Rails 5) without problems: https://github.com/choonggg/flickr-search

Judah Meek · Answer 13 · Tue May 24 2016 06:33:20 GMT+0800 (China Standard Time)

What I should have said was that my friend used this gem in combination with Bootstrap without any complaints. Looking at the responsiveness of his demo app on heroku, however, I suspect that there are further issues.

Judah Meek · Answer 14 · Tue May 24 2016 07:19:16 GMT+0800 (China Standard Time)

So there may be an issue, but it doesn't seem to be Bootstrap specific.

My friend had col-md-4 as the only width constraint for his bricks and nothing setting his #masonry-container width, so for any window.width() < 992, his bricks did basically whatever they wanted to.

One possible issue: Instead of starting with a full-size browser and shrinking it, I tried refreshing with a thin browser (width < 992 pxs, so no set width for bricks or column), this resulting in all the bricks being positioned at 0,0, which made it look like there was only one brick there. Shrinking the browser when there is no set width for bricks or container also seems to mean that the number of columns do not change, even if this results in horizontal overflow.

Possible solution: If there is no set width for bricks or the container, the container could revert to a single column with display:block bricks.