如何拉伸Bootstrap导航栏的元素以利用整个宽度？

Question

如何拉伸Bootstrap导航栏的元素以利用整个宽度？

javascripttwitter-bootstrapnavbar

22

考虑以下 Bootstrap 导航栏： My custom Bootstrap navigation bar

关于此导航栏的一些事实：

- 导航栏本身宽度为 620 像素（页面宽度）。 - 导航栏是响应式的（在 640 像素处断点折叠）。 - 导航栏的元素紧密粘合（没有空隙）。 - 导航栏支持多语言（元素宽度会更改）。

如何拉伸导航栏的元素以利用整个宽度？右侧剩余的空白空间应分配给导航栏的元素。由于每个元素的宽度都不同，这个宽度可能会根据语言而变化，我不能使用百分比来工作。我猜唯一的解决办法将是使用 JavaScript。但我找不到任何例子...

JsFiddle 演示：http://jsfiddle.net/zBM6D/3/

<body>
    <div id="page">
        <header id="header">
            <nav class="navbar navbar-default roboto normal" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-elements"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                        </button>
                    </div>
                    <div class="collapse navbar-collapse" id="navigation-elements">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">START</a>
                            </li>
                            <li><a href="#">THESE</a>
                            </li>
                            <li><a href="#">ARE</a>
                            </li>
                            <li><a href="#">SOME</a>
                            </li>
                            <li><a href="#">ELEMENTS</a>
                            </li>
                            <li><a href="#">WITH</a>
                            </li>
                            <li><a href="#">DIFFERENT</a>
                            </li>
                            <li><a href="#">WIDTHS</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div class="clear"></div>
        </header>
    </div>
</body>

- Karsten

很好，可以在http://jsfiddle.net上展示你的代码。 - Dhanu Gurung

这是链接：点击这里。当然，我已经将代码缩减到了导航栏。 - Karsten

2个回答

5

根据@Moob的回答，我创建了一个代码片段，可以很好地实现这一点:

https://gist.github.com/lukaszbachman/48774b74b6c4e9d0f4cb#file-navigation-stretch-css

- ŁukaszBachman

1

链接似乎已经失效了。如果我们能得到更新后的链接，将不胜感激。 - jerbersoft

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Moob · Accepted Answer

您可以使用CSS表格布局来分配导航项。它在各种浏览器中得到了很好的支持，而且实现简单：

.navbar-nav {
    display:table;
    width:100%;
    margin: 0;
}
.navbar-nav > li {
    float:none;
    display:table-cell;
    text-align:center;
}

这会使它的宽度完全符合其父元素#header的宽度，而#header的宽度又受到#page宽度的限制，因此，如果您需要它跨越整个文档宽度的100％，则需要将它移到#page之外或使#page更宽。

http://jsfiddle.net/zBM6D/5/