Flexbox包装Safari中第一行的最后一列

Question

在Safari和其他一些基于iOS的浏览器中查看时,第一行的最后一列被包装到下一行.

苹果浏览器:

Chrome /其他:

码:

.flexthis {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexthis .col-md-4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

<div class="row flexthis">
  <div class="col-md-4 col-sm-6 text-center">
    <div class="product">
      <img src="img.jpg" alt="" class="img-responsive">
      <h3>Name</h3>
      <p>Description</p>
    </div>
  </div>
</div>

Answer 1

说明

发生这种情况是因为Safari将伪元素之前和之后视为真实元素.例如,考虑一个有7个项目的容器.如果容器具有:before和:之后Safari会定位这样的项目:

[:before ] [1st-item] [2nd-item]

[3rd-item] [4th-item] [5th-item]

[6th-item] [7th-item] [:after  ]

解

作为已接受答案的替代方法,我删除:在&之后,从flex容器中删除而不是改变HTML.在你的情况下:

.flexthis.container:before,
.flexthis.container:after,
.flexthis.row:before,
.flexthis.row:after {
   content: normal; // IE doesn't support `initial`
}

Answer 2

只是为了更新我的问题

这是我使用的解决方案,对于与Flexbox兼容的Bootstrap4来说,这显然是固定的.所以这只适用于bootstrap3.

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

Answer 3

我知道这个问题已经很老了,但我今天遇到了这个问题,浪费了12个多小时来修复它.尽管大约花了10个小时才意识到safari正在以12列自举网格失败,但这不是其他问题.

修复我做的很简单.这是Visual Composer的版本.其他框架的类名可能有所不同.

.vc_row-flex:before, .vc_row-flex:after{
  width: 0;
}

Answer 4

我不想添加更多的类来修复此类错误，因此，您也可以修复.row类本身。

.row {
    &:before {
        content: none;
    }

    &:after {
        content: '';
    }
}