[tabs] Nav-Tab displays poorly on small screen

[Marty]

Marty

December 17, 2014 at 1:13 pm

Using [TABs] Nav-Tab on a page and then viewing on a small screen, tabs display jammed together.

I switched from using the [tabs] shortcode to using the bootstrap built-in method of using .nav-tab so I can align them evenly across the page using the col-xs-12 and col-sm-3 classes (full width) and each one full width or stacked on top of each other on a xs screen.

*Login to see link

<div role=”tabpanel”><!– Nav tabs –>
<ul class=”nav nav-tabs” role=”tablist”>
<li class=”col-sm-3 col-xs-12″ role=”presentation”>State Government
<li class=”col-sm-3 col-xs-12″ role=”presentation”>USFS & BLM
<li class=”col-sm-3 col-xs-12 active” role=”presentation”>Equestrian Links
<li class=”col-sm-3 col-xs-12″ role=”presentation”>Misc.

When viewed on a small screen the class “col-xs-12” is being ignored. The LI items should display full screen and on top of each other. They are being displayed with a width of the text + padding. In using the element inspector it shows that col-xs-12 is NOT being set to a width of 100% but col-sm-3 is being set to a width of 25%. I have the same HTML running on a different website that uses the Bootstrap 3 framework and nav-tabs display correctly using the same code. When I use the element inspector on the other web site it shows col-xs-12 has a width set to 100%. The other web site page is *Login to see link

I tried to set the .col-xs-12 {width:100%}, but this made the LI items 100% wide all the time on any size screen. There must be a simple solution to this problem. I looked for an answer out on the web but found no solution.