当元素为 25% 时，Safari display flex 不起作用

Question

我们在 iPads 和 Mac 上有一个问题，这让我们非常恼火。

我们正在使用 bootstrap，并使用 .col-xs-12.col-sm-5.col-md-3 [=31= 在 .row 中创建了 9 个元素]es.

在 .row 上，我们应用了具有以下内容的 .flex-start class：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 中，第一个 flex 行只包含 3 个项目。

样本here and screenshot here。您必须在 Mac 或 iPad

上在 safari 中打开

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

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

Answer 1

我最近遇到了同样的问题。行 class.

附带的伪 :after 和 :before 元素存在问题

我认为省略 class 行不是最佳解决方案。在我的情况下，我可以用这个 css:

在 safari 中修复它

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

你也可以看看这个post:

Answer 2

只需将 "clearfix" class 添加到行，然后将 "float: left;" 属性添加到行内的所有列。

这在 Safari 中可以正常工作。

当元素为 25% 时，Safari display flex 不起作用

Safari display flex not working when elements are 25%

safari

mobile-safari

flexbox

twitter-bootstrap