使用flexbox justify-content：space-between属性，Bootstrap导航丸不能按预期工作

Question

我正在尝试使用带有flexbox justify-content:space-between的Bootstrap'nav-pills组件： 这就是我得到的结果：

虽然我期待这个：

以下是代码：http://jsbin.com/qihekuteze

Answer 1

由于Bootstrap的clearfix，这种情况正在发生。添加了::before和::after个伪元素，这些元素也计算为flexbox的子元素。

如果你添加：

.nav::before,
.nav::after {
  display: none;
}

并确保它仍然justify-content: space-between;，然后它会修复它。

新垃圾箱：http://jsbin.com/zipigociqi/1/

Answer 2

因此，经过相当多的摆弄后，问题是content: " "该引导程序适用于导航类的:before和:after样式。所以你的CSS应该是：

.nav::after, 
.nav::before {
    display: none;
}