css - 推特 Bootstrap 3 : Nav Should Take up Remainder of Screen Width

Question

我有一个向左浮动的 div。在它的右边，我有一个 <ul class='nav nav-tabs'> .

如果我将导航列表 float 到左侧，它看起来不错，只是列表的底部边框仅延伸到导航选项下方。我如何让它延伸到屏幕的剩余部分？ (即一直向右)。

如果我不将列表 float 到左侧，选项卡会留在正确的位置，但底部边框适合 100% 的视口(viewport)并移动到左侧导航栏的下方。

这是 JS fiddle :http://jsfiddle.net/kimprince/TCEPE/

谢谢!

Answer 1

不是将右列向左浮动，而是添加 overflow:hidden(或 auto)以触发新的 block formatting context .

这有效地导致右列占据了剩余的水平空间。

您可以找到有关其工作原理的详尽解释 here

#right-col
{
  overflow:hidden;
}

FIDDLE