当元素为25％时，Safari浏览器显示器无法正常工作

Question

我们在iPad和Mac上遇到了一个问题，我们真的很烦人。

我们使用bootstrap，并在.row中创建了9个元素，其中包含.col-xs-12.col-sm-5.col-md-3类。

在.row我们应用了.flex启动类下面的CSS：

.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中的第一柔性排只有3个项目。

样本here和屏幕截图here。您必须在Mac或iPad上的Safari浏览器中打开

将col-md-3的宽度设置为24.9％可以修复此问题，但我们不希望发生这种攻击。

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

Answer 1

我最近有同样的问题。在行类的元素之后的pseudo：after和之前存在一个问题。

我认为省略行类并不是最好的解决方案。

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

您也可以看看这个帖子：

Flexbox Safari bug (flex-wrap)

Answer 2

只需添加“clearfix”类行并添加“就我而言，我可以用这个CSS修复它在Safari向左飘浮;”属性添加到行内的所有列。

这将在Safari中正常工作。