调整窗口大小时，引导轮播项目会相互堆叠

Question

I am developing a carousel with Bootstrap which also needs to be responsive. It works pretty well when the screen width is bigger than 1200px , but when it's lower the elements get stacked one above each other.

This is the bootply with the code. What I would like to get is that the items are displayed on the same line and eventually if one of them overflows, it has to go on a new line.

Does some of you have a suggestion of what I am doing wrong?

Thanks in advance for your replies!

Answer 1

your element has col-lg-2 class which has float:left for media > 1200px. anything less than that does not float left. Add other classes for different devices such as col-xs-2, col-sm-2, col-md-2