Bootstrap 3: Navbar Tabs gleich der Seitenbreite

Question

Ich versuche, Abstände Tabs zu erstellen. Ich möchte etwa 6-8 von ihnen über die Breite des Bildschirms laufen, jeder mit gleichem Abstand voneinander. Ich brauche sie auch Drop-Down-Fähigkeit auf Hover.

Zunächst ging ich mit Bootstrap 3 für schnelle und schnelle Tabs. Allerdings kann ich nicht scheinen, sie gleichmäßig über die Breite der Seite in den Weltraum zu bringen.

Alternativ fand ich diese erstaunliche snippet Code, der rein css ist. Allerdings bin ich weit entfernt von einem CSS-Assistenten und ein reines Dropdown wie die Tabs würde mich sehr lange dauern.

Wer weiß eine Lösung für das Bootstrap 3 Problem der Abstand oder wissen, wo ich eine reine CSS-Dropdown-Lösung bekommen kann? Bootstrap 3 code unten, pure css in jsfiddle link

Vielen Dank!

Code:

<ul class='nav nav-tabs'> 
    <li class='dropdown'> 
    <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 1</a> 
    <ul class='dropdown-menu'> 
     <li><a href='#'>test 1</a></li> 
    </ul> 
    </li> 
    <li class='dropdown'> 
    <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 2</a> 
    <ul class='dropdown-menu'> 
     <li><a href='#'>test 2</a></li> 
    </ul> 
    </li> 
    <li class='dropdown'> 
    <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 3</a> 
    <ul class='dropdown-menu'> 
     <li><a href='#'>test 3</a></li> 
    </ul> 
    </li> 
</ul> 

Answer 1

Sie können den Code in einem div mit container-fluid Klasse umschließen. Es wird Ihnen helfen, die gesamte Breite von apge zu nutzen.

ul.nav-tabs > li { 
 
    width: 33%; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <ul class='nav nav-tabs'> 
 
    <li class='dropdown'> 
 
     <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 1</a> 
 
     <ul class='dropdown-menu'> 
 
     <li><a href='#'>test 1</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class='dropdown'> 
 
     <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 2</a> 
 
     <ul class='dropdown-menu'> 
 
     <li><a href='#'>test 2</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class='dropdown'> 
 
     <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 3</a> 
 
     <ul class='dropdown-menu'> 
 
     <li><a href='#'>test 3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>