Stacked bootstrap text overflow

Question

I am trying to create a list of horizontal tabs that can be selected, and the contents of the tab have an additional list of tabs (stacked) that show the contents of these tabs next to them.

I created bootply here so you can see what I mean.

When resizing to xs, the text in the tabs will overflow for the stacked tabs, and for tabs with a drop-down list, the drop-out options will be disproportionate to the size of the tab

In fact, I did not find a decent way to get around this. What is the way to fix this? Thought of making media queries, but not sure what the best route is.

Answer 1

In my bootply, I nested sub tabs navon the stack (in the tab contents section) of the class nav-stackedwith the class col-xs-3. This caused problems for some reason with smaller screen sizes.

Removing a class nav-stackedand leaving it as a normal ordinary class nav nav-pills, working and correctly displayed, since each tab is clicked on the stack due to the small size of the column. No text overflow.

What about large screen sizes if you still want them to be folded? I just made a hacker decision and set col-xs-3 col-sm-2 col-md-1it to still force tabs to stack.

Updated bootply

md-sm ( ) xs-sm, . -.