html - 使用 Bootstrap，我如何实现这种水平选项卡布局？

Question

我正在尝试使用引导导航选项卡来执行以下操作

我几乎用主要的 HTML+CSS 到了那里，但是如果不扔掉整个布局，我就不能让“概述”框比其他框大。有没有人知道如何让概览框比其他框更大，并且是蓝色的。这不必悬停，只是默认情况下用户所在的选项卡会比其他选项卡大。

我在这里拼凑了代码 - 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/broken）。我在您的第一个“li”中添加了一个名为 active 的类，并应用了一些 CSS 规则。