Menu Accordion horizontal Bootstrap 3.3.6

Question

I need help. I'm doing a demo in which I am using an accordion. The problem with this is that I need accordion on one line. In the following example I step looks good on desktop mode "that's how I have to do it" but when in mobile mode, the 3 lines are placed below each other and that's what I do not. I put a float:left in each <LI> but its content disturbs me.

Code: http://bootsnipp.com/user/snippets/l06gQ

As is to be seen:

The content in mobile mode should be centered on the left when you go opening tabs.

Any solution?

Answer 1

If I understand correctly what you want then bootstrap.css is overriding it on lower screen sizes.

Try adding the following.

.nav>li{display:inline-block}

Or you may want to set it for mobiles only with.

@media (max-width: 768px) {
    .nav>li{display:inline-block}
}

Or if you wanted to apply it just to that menu and not others

#menuEstatic .nav>li {display:inline-block}

You can also use float:left as an alternative to display:inline-block if you prefer.