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

Question

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

Kar*_*ten 20 javascript navbar twitter-bootstrap

请考虑以下Bootstrap导航栏:

我的自定义Bootstrap导航栏

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

条形本身正好宽620px(页面宽度)
条形图是响应式的(折叠断点为640px)
酒吧的元素粘在一起(两者之间没有空格)
该栏具有多语言支持(元素的宽度变化)

如何拉伸条形元素以利用整个宽度？右侧剩余的空白区域应分布在条形元素中.由于每个元素具有不同的宽度,并且此宽度可能因语言而异,因此我无法使用百分比.我想唯一的解决方案是JavaScript.但我找不到任何例子......

Js Fiddle演示: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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Moo*_*oob 21

您可以使用CSS表格显示布局来分发您的导航项目.它在浏览器中得到很好的支持并且易于实现:

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

Run Code Online (Sandbox Code Playgroud)

这使得它的100%是其父级的宽度#header,而宽度又受到宽度的限制#page,因此如果您需要它跨越整个文档宽度的100%,则需要将其移出#page或#page扩大.

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

Answer 2

Łuk*_*man 5

根据@ Moob的回答,我创造了一个应该做得很好的要点:

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

归档时间：	11 年，6 月前
查看次数：	18298 次
最近记录：	9 年，5 月前