Twitter bootstrap 元素为25%时Safari display flex不工作

我们在iPad和Mac上遇到了一个问题，这让我们非常恼火

我们使用的是bootstrap，并且在.col-xs-12.col-sm-5.col-md-3类的.row中创建了9个元素

在.row上，我们使用以下css应用了.flex start类：

.flex-start {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

在safari中，第一个flex行仅包含3项

示例和屏幕截图。您必须在Mac或iPad上的safari中打开

将col-md-3的宽度设置为24.9%可以解决这个问题，但我们不希望出现这种情况

---

有没有其他人遇到过这个问题，并且知道修复方法？

我最近也遇到了同样的问题。row类附带的伪：after和：before元素存在问题

我认为省略row类不是最好的解决方案。在我的情况下，我可以用以下css在safari中修复它：

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

你也可以看看这篇文章：

只需将“clearfix”类添加到行中，并将“float:left；”属性添加到行中的所有列中即可

---

这将在Safari中很好地工作。

Lifesaver！这节省了我几个小时的工作！请记住对这个问题也投赞成票。