使用Bootstrap，我如何实现这种水平标签布局？

Question

我正在尝试使用bootstrap nav-tabs执行以下操作

Example http://i42.tinypic.com/34f1j6f.jpg

我几乎使用主HTML + CSS，但我不能让'Overview'框比其他框更大而不抛出整个布局。有没有人有任何想法如何让Overview框大于其他框和蓝色。这不一定是悬停，只是默认情况下，用户所在的选项卡将比其他选项卡更大。

我在这里汇总了代码 - http://jsfiddle.net/csU5r/

<ul class="nav nav-tabs" style="padding-bottom:0px; margin-bottom:0px; vertical-align:bottom;">
  <li><a href="#home" style="color:White;">Overview</a></li>
  <li><a href="#home" style="color:White;">Tab 2</a></li>
  <li><a href="#home" style="color:White;">Tab 3</a></li>
  <li><a href="#home" style="color:White;">Tab 4</a></li>
</ul>

（请原谅一些在线造型，它会被移动......我保证！）

任何指针都会很棒！

Answer 1

尝试此解决方案（jsfiddle.net/gustavocorrea/3mSjy/1/已损坏）。我在你的第一个“li”中添加了一个名为active的类，我应用了一些CSS规则。