Twitter Bootstrap 3:导航应该占用屏幕宽度的剩余部分

时间:2013-09-30 02:06:24

标签: css twitter-bootstrap twitter-bootstrap-3

我有一个浮在左边的div。在右边,我有一个<ul class='nav nav-tabs'>

如果我将导航列表向左浮动,它看起来很好,只是列表的下边框仅在导航选项下方延伸。如何让它延伸到屏幕的其余部分? (即一直到右边)。

如果我没有将列表浮动到左侧,则标签保持在正确的位置,但是底部边框适合100%的视口,并移动到左侧导航栏的下方。

这是JS小提琴:http://jsfiddle.net/kimprince/TCEPE/

谢谢!

2 个答案:

答案 0 :(得分:2)

不要将右列浮动到左侧,而是添加overflow:hidden(或auto)以触发新的block formatting context

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

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

#right-col
{
  overflow:hidden;
}

FIDDLE

答案 1 :(得分:1)

你好不太明白使用col-class如col-lg-4如果你可以避免它使用类pul-left左侧浮动它或者向右拉浮动它

也可以让我在网上编辑器中使用bootstrap的头部链接,点击HTML旁边的图标。

http://codepen.io/CarraraWebsiteSolutions/pen/JFebh