ブートストラップ3：Navbarタブはページ幅と同じです

Question

離散タブを作成しようとしています。私はそれらのうちの約6-8が画面の幅を横切って走っていて、それぞれはお互いに等しい距離を隔てています。ホバーにドロップダウン機能を持たせる必要もあります。

最初は、速くて速いタブのためにブートストラップ3を使いました。しかし、私はそれらをページの幅全体にわたって均等にスペースにすることはできません。

また、私は純粋なCSSであるこの素晴らしいコードsnippetを見つけました。しかし、私はCSSのウィザードからは遠く、タブのような純粋なドロップダウンは私には長い時間がかかります。

ブートストラップ3の問題の解決策を知っている人なら誰でも、どこに純粋なCSSドロップダウンソリューションを入手できるのか知っていますか？ブートストラップ3のコード、jsfiddleのリンクの純粋なCSS

ありがとう！

コード：

<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

あなたはcontainer-fluidクラスでdivの内側にあなたのコードを囲むことができます。これは、あなたがapgeの幅全体を利用するのに役立ちます。

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>