使用 flexbox justify-content:space-between 属性时，Bootstrap Nav 药丸无法正常工作答案

【问题标题】：Bootstrap Nav pills not working as spected using flexbox justify-content:space-between property使用 flexbox justify-content:space-between 属性时，Bootstrap Nav 药丸无法正常工作
【发布时间】：2015-05-28 10:12:36
【问题描述】：

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

虽然我期待这个：

这里是代码：http://jsbin.com/qihekuteze

【问题讨论】：

这不是我所看到的。对我来说，所有的药丸都被推到最左边，它们之间有 2px 的边距。 Safari 8.0.4
好吧，我只是在 Chrome 41 和 IE 11 上测试它，但我得到了相同的结果......这很奇怪......：/

标签： html css twitter-bootstrap flexbox

【解决方案1】：

这是因为 Bootstrap 的 clearfix。添加了 ::before 和 ::after 伪元素，它们也算作 flexbox 的子元素。

如果添加：

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

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

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

【讨论】：

快点打败我吧 :)

【解决方案2】：

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

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

【讨论】：