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

说明

发生这种情况是因为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`
}

只是为了更新我的问题

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

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

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

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

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

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

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

    &:after {
        content: '';
    }
}