Question

I have an Bootstrap Responsive Grid-Layout. I get these problems. So, the "cells" are overlapping. This happens with container-fluid and row-fluid too. I know, I can use overflow and text-overflow for prevent this, by why is this happening and is there a native (Bootstrap) solution for it?

Thanks for any help, Maxthat

EDIT: Thanks to all of you. Yes, I know this can be fixed by adding some spaces, but sometimes, brainfuck. :D

Was it helpful?

Solution

This happens because the text is one really long word. The text is overlapping because it's breaking out of the div. But the divs are not overlapping. Just put some spaces in your word or use something like lorem ipsum to provide a more real world test.

OTHER TIPS

That is caused because the example text you are using is actually one word without any space, thus resulting in overflowing.

Try inserting natural text like 'Lorem Ipsum' and it will be okay.

Add spaces to your example and the problem goes away.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top