Bootstrap 3中合理的100％宽度导航栏答案

【问题标题】：Justified 100% width navbar in Bootstrap 3Bootstrap 3中合理的100％宽度导航栏
【发布时间】：2015-06-01 18:25:04
【问题描述】：

我希望我的导航栏的列表项跨越页面的整个宽度，但要合理。我尝试了 Morgen32 在这个问题中的第二个答案：How to justify navbar-nav in Bootstrap 3

    @media (min-width: 768px){
    .navbar-nav {margin: 0 auto; display: table; table-layout: fixed; float:none; width:100%;}
    .navbar-nav > li {display:table-cell; float:none; text-align:center;}
}

但是，较长的项目会变成两行，并且也没有使用页面的整个宽度。

http://jsfiddle.net/xt7Laawd/2/

提前感谢您的帮助！

编辑：我编辑了小提琴。这不是正确的。

【问题讨论】：

似乎在 Chrome 中按预期工作。
我刚刚意识到我复制了错误的 jsfiddle 链接。在 OP 中更新了它。引用的小提琴@humble.rumble 的问题是它没有延伸到导航栏的最大值。我想要左边缘的第一个项目，右边缘的最后一个项目，其余的居中并对齐。

标签： html css twitter-bootstrap-3

【解决方案1】：

好的，我明白了。结果我不得不将table-layout 更改为自动而不是固定。

@media (min-width: 768px){
    .navbar-nav {margin: 0 auto; display: table; table-layout: auto; float:none; width:100%;}
    .navbar-nav > li {display:table-cell; float:none; text-align:center;}
}

【讨论】：