Bootstrap Nav pills 使用 flexbox justify-content:space-between 属性 无法正常工作

Question

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

虽然我预料到了：

代码如下：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: " " bootstrap 适用于 :before 和 :after 导航样式 类。所以你的 css 应该是：

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