使用偶数空格来证明Bootstrap导航栏导航列表项

Question

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

我看过this question但它并没有解决我的问题，尽管我确实使用它来居中并证明导航栏的正确性。

这是一个bootply：http://www.bootply.com/UjY99PYpe7

Answer 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;
}

Answer 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;
}