How to disable stacking of bootstrap justified tabs on small screens

Question

I have seen this post, but being a new user I can\'t comment to ask for clarification.

I\'m using the justified nav tabs in Bootstrap and don\'t want them to stack o

Answer 1

There is a really simple way to prevent stacking:

CSS:

.nav li {
    display:table-cell !important;
}

I searched for this and was annoyed by answers involving custom building bootstrap (I use CDN), and LESS (which I don't use)

This works great for me...

Answer 2

In addition to james answer if you don't want to limit max-width to 768px you can do:

@media (min-width: 0px) {

  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }

}

Should I avoid using !important in CSS?

If you prefer to avoid using !important in CSS paste the code after the bootstrap inclusion.

Answer 3

I've attempted to edit @pjb answer as it's incomplete. But my edit was rejected, twice, as apparently it's 'incorrect'. Although plunker would tend to disagree...

This is the original that shows that the active tabs bottom border is showing when condensed

http://plnkr.co/edit/p62KlHnqPjAsK7XR3mLa?p=preview

And this version, where it's clearly not showing

http://plnkr.co/edit/BBDW7nIxGh0J6a9vsuZx?p=preview

@media (max-width: 768px) {
  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-justified > li > a  {
    border-bottom: 1px solid #ffffd !important;
    border-radius: 4px 4px 0 0 !important;
    margin-bottom: 0 !important;
  }
  .nav-tabs.nav-justified > .active > a,
  .nav-tabs.nav-justified > .active > a:hover,
  .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #fff !important;
  }
}