Bootstrap : prevent "nav-tabs nav-justified" from stacking on small screen - css

Question

I'm using Twitter Bootstrap 3 and I have a sidebar and tabs in it.
<div class="col-md-4">
<div class="side-posts">
<ul class="nav nav-tabs nav-justified">
<li class=""><span data-icon=""></span> Recent</li>
<li class="active"><span data-icon=""></span> Popular</li>
</ul>
<div class="tab-content">
.....
</div>
</div>
</div>
When screen's width gets smaller the tabs stack on each other like this
Is it possible to keep the original look and prevent this change?

Answer 1

I had to write my own tabs style to get it work.
Here is a live bootply
in case link got broken here is the css:
/* CSS used here will be applied after bootstrap.css */
body{
background-color: #f2f2f2;
}
.container{
width: 325px;
}
.side-posts{
margin-top:15px;
}
.post-tabs{
padding:0;
margin-bottom:0;
list-style-type: none;
overflow: hidden;
}
.post-tabs li{
display: inline;
}
.post-tabs a{
display: block;
z-index: 1;
text-decoration: none;
padding: 10px 15px;
float: left;
width: 50%;
text-align:center;
border-bottom: 1px solid #dddddd;
text-shadow: 1px 1px 0 white;
transition:color 0.3s ease;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
color:#3b5998;
}
.post-tabs a:hover{
color:#e95c40;
}
.post-tabs li.active a{
border-bottom: 0;
color: #444444;
z-index: 2;
}
.post-tabs li.active:first-child a {
border-right: 1px solid #dddddd;
box-shadow: inset -3px 0px 3px 0px rgba(0,0,0,0.4);
}
.post-tabs li.active:last-child a{
border-left: 1px solid #dddddd;
box-shadow: inset 3px 0px 3px 0px rgba(0,0,0,0.4);
}
.tab-content{
height:400px;
background-color: #dddddd;
}

Answer 2

You can add float:left; and remove float:none; editing the mobile media query inside bootstrap like:
#media (min-width: 768px){
.nav-tabs.nav-justified > li {
float: none;
}
}
#media (max-width: 768px){
.nav-tabs.nav-justified > li {
float: left;
}
}
DEMO http://jsfiddle.net/a_incarnati/52VtD/7771/

Answer 3

This worked perfectly for me, even keeps the default styling for bootstrap justified nav-bar.**
#media (max-width: 768px){
.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-justified > li > a {
border-bottom: 1px solid #ddd !important;
border-radius: 4px 4px 0 0 !important;
margin-bottom: 0 !important;
}
.nav-justified > li.active > a {
border-bottom: 1px solid transparent !important;
}
}