Bootstrap 3: Navbar Tabs Equal to Page Width
<p>I'm trying to create spaced tabs. I want about 6-8 of them running across the width of the screen, each with equal distance apart from each other. I also need them to have dropdown ability on hover.</p>

<p>Initially I went with Bootstrap 3 for quick and fast tabs. However, I can't seem to get them to space equally across the width of the page.</p>

<p>Alternatively, I found this awesome <a href="http://jsfiddle.net/csswizardry/zfSt4/" rel="nofollow">snippet</a> of code which is pure css. However, I'm far from a css wizard and making a pure dropdown like the tabs would take me a long time.</p>

<p>Anyone know a solution to the bootstrap 3 problem of spacing or know where I can get a pure css dropdown solution? Bootstrap 3 code below, pure css in jsfiddle link</p>

<p>Thanks!</p>

<p>Code:</p>

<pre><code>&lt;ul class='nav nav-tabs'&gt;
  &lt;li class='dropdown'&gt;
    &lt;a class='dropdown-toggle' data-toggle='dropdown' href='#'&gt;Test 1&lt;/a&gt;
    &lt;ul class='dropdown-menu'&gt;
      &lt;li&gt;&lt;a href='#'&gt;test 1&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class='dropdown'&gt;
    &lt;a class='dropdown-toggle' data-toggle='dropdown' href='#'&gt;Test 2&lt;/a&gt;
    &lt;ul class='dropdown-menu'&gt;
      &lt;li&gt;&lt;a href='#'&gt;test 2&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class='dropdown'&gt;
    &lt;a class='dropdown-toggle' data-toggle='dropdown' href='#'&gt;Test 3&lt;/a&gt;
    &lt;ul class='dropdown-menu'&gt;
      &lt;li&gt;&lt;a href='#'&gt;test 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>