CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
jonathanGB
jonathanGB

Reputation: 1540

Bootstrap tabs not displaying correctly when window too small

So I have a nav menu using the tabs from bootstrap. It's all good, but when the window is at such width that the tabs (justified) are not yet stacked, it's displaying weirdly (because some tabs are now taking two lines rather than one line), as you can see:

Good:

screencap good

Bad:

screencap bad

And here's the HTML:

<ul id="onglets" class="nav nav-tabs nav-justified" role="tablist">
    <li class="active"><a href="#mod" data-toggle="tab"> addition (polaire) </a></li>
    <li><a href="#com" data-toggle="tab"> addition (composantes) </a></li>
    <li><a href="#con" data-toggle="tab"> conversion d'angles </a></li>
    <li><a href="#mul" data-toggle="tab"> produit </a></li>
    <li><a href="#uni" data-toggle="tab">vecteur unitaire </a></li>
</ul>

I think I've found the CSS related to nav-justified in my bootstrap.min.css:

.nav-tabs.nav-justified{width:100%;border-bottom:0}.nav-tabs.nav-justified>li{float:none}.nav-tabs.nav-justified>li>a{text-align:center;margin-bottom:5px}.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}.nav-tabs.nav-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border:1px solid #ddd}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border-bottom-color:#fff}}

How can I solve this problem? Thanks!

Edit: So, by playing with the bootstrap.min.css file, I was able to change the @media query to change the tabs to be stacked to 992px rather than 768px (as it would start to be corrupted at 991px). It works, but if someone has a better solution, I am open!

Upvotes: 1

Views: 893

Answers (1)

omma2289
omma2289

Reputation: 54619

Using white-space:nowrap; you can make the tabs always display in a single line, this may be a solution for you:

@media (min-width: 768px){
    #onglets>li>a {
        white-space: nowrap;
    }
}

Demo fiddle

Upvotes: 2

Related Questions