用偶数空间对齐 Bootstrap navbar-nav 列表项答案

【问题标题】：Justifying Bootstrap navbar-nav list items with even space用偶数空间对齐 Bootstrap navbar-nav 列表项
【发布时间】：2016-06-21 19:26:33
【问题描述】：

我有一个带有一些列表项的导航栏菜单。我什至需要它们之间的空白，这对我来说很困难，因为某些列表项比其他项长。

我查看了this question，但它并没有解决我的问题，尽管我确实使用它来居中和对齐导航栏。

这是一个引导程序：http://www.bootply.com/UjY99PYpe7

【问题讨论】：

是您要查找的每个列表项的固定填充，如下所示：bootply.com/De8KGK6Gz4 ??
@LuukSkeur 否。您的解决方案没有响应。并在某些时候分为两条线。
这到底为什么被否决了？！
@RachelS 有点讨厌，我会投票支持这个领域。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

在你的 bootply 中试试这个 css：

.navbar-nav {
    text-align: justify;
    min-width: 100%;
}
.navbar-nav:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.navbar-nav li {
    display: inline-block;
    float:none;
}

【讨论】：

天才解决方案 :) 非常感谢！
不是我的主意，很久以前在博客上看到的，用了好几次
@RachelS 我以为你不希望按钮之间有空格。
@warkentien2 我确实需要空间，它们之间必须是均匀的空间。明天我会看看你的全幅想法。
@RachelS 做测试！它看起来更接近您的初始引导布局，但甚至间隔。

【解决方案2】：

如果您希望按钮是全宽

试试这个`flexbox` 解决方案

.navbar-nav {
  width: 100%; 
  display: flex;
  flex-wrap: no-wrap;
  justify-content: space-between;
}

.navbar-nav > li {
  flex-grow: 1;
  text-align: center;
}

【讨论】：

也可以，但已经实施了 pp 的建议，所以会继续这样做。感谢您的帮助！
@RachelS 只是给未来的用户带来更多问题。谢谢！
只是想让你知道我今天在另一个网站上使用了你的解决方案；）
谢谢你告诉我！我很高兴能帮上忙。
Flexbox 在元素之间均匀地细分空间。 flex-grow 拉伸元素以填充为其创建的整个空间。您可以应用不同的flex-grow 大小来为该元素提供相应更大的空间。

试试这个flexbox 解决方案

试试这个`flexbox` 解决方案