// Prevents weird looking tabs on big reports .nav-justified > li > a { padding-left: 4px; padding-right: 4px; margin-right: 1px; white-space: nowrap; } // Give a little padding to multi row tabs .nav-justified { padding: 10px 0 0 0; } .nav-justified { // Reset tabs to collapsed on @screen-sm-min sizes. @media (min-width: @screen-sm-min) { > li { display: block; width: 100%; float: none; > a { text-align: center; margin-bottom: 5px; } } } // Ok to show tabs on medium screens @media (min-width: @screen-md) { border: 0; border-radius: 0; > li { display: table-cell; width: 1%; > a { margin-bottom: 0; } } } } .nav-tabs-justified { > li > a { // Override margin from .nav-tabs margin-right: 1px; border-radius: @border-radius-base; } > .active > a, > .active > a:hover, > .active > a:focus { border: 1px solid @nav-tabs-justified-link-border-color; } @media (min-width: @screen-sm-min) { > li > a { border: 1px solid @nav-tabs-justified-link-border-color; border-radius: @border-radius-base; } } @media (min-width: @screen-md-min) { > li > a { border-bottom: 1px solid @nav-tabs-justified-link-border-color; border-radius: @border-radius-base @border-radius-base 0 0; } > .active > a, > .active > a:hover, > .active > a:focus { border-bottom-color: @nav-tabs-justified-active-link-border-color; } } }