Responsive issue with Bootstrap 3.x nav-tabs
I have a bootstrap component's navigation tabs and it works fine when the page width is larger than the row needs (bootstrap.row div). The problem is that when changing the view for mobile, the responsive design doesn't behave as it should and the tabs are misaligned. Please see the code in the link below, page width reduction ratio, Company, Support and Design tabs behave strangely.
http://www.bootply.com/Ym1iDjaBjz#
source to share
This is ok because there isn't enough space for all the tabs.
You can reduce the padding in .nav-tabs li a
to create space or add a rule to make them appear at 100% speed.
.nav-tabs > li, .nav-tabs li a { display: inline-block; width: 100%; }
.nav-tabs li a { border: 1px solid #ddd; }
Good luck!
source to share
I've used the bootstrap-tabcollapase library in similar situations: https://github.com/flatlogic/bootstrap-tabcollapse
It is a third party loading add-on that converts tabs in the accordion panel at small request widths.
source to share