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.

nav-tabs responsive error


source to share

2 answers

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; }


enter image description here

Good luck!



I've used the bootstrap-tabcollapase library in similar situations:

It is a third party loading add-on that converts tabs in the accordion panel at small request widths.



All Articles