Clever Geek Handbook

Bootstrap: preventing "nav-tabs nav-justified" from stacking to small screen

I am using Twitter Bootstrap 3 and I have a sidebar and tabs.

enter image description here

<div class="col-md-4">
    <div class="side-posts">
        <ul class="nav nav-tabs nav-justified">
          <li class=""><a href="#recent" data-toggle="tab"><span data-icon="&#xe048;"></span> Recent</a></li>
          <li class="active"><a href="#top" data-toggle="tab"><span data-icon="&#xe0b0;"></span> Popular</a></li>
        </ul>

        <div class="tab-content">
        .....
        </div>
    </div>
</div>

When the screen width gets smaller, the tabs stack on top of each other, like this

enter image description here

Is it possible to keep the original look and prevent this change?

+3


source to share


3 answers


I had to write my own style of tabs for it to work.

enter image description here

Here is the live bootply



In case the link was broken this 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;
}
+2


source


You can add float:left;

and remove float:none;

edit mobile media query inside bootstrap, for example:

 @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/

+1


source


This worked great for me, even keeps the bootstrap default styling justified by 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;
  }

}
0


source






More articles:


All Articles