使用flexbox的Bootstrap列在iOS和Safari上没有采用适当的宽度

Question

JSFIDDLE

我正在尝试使用带有引导列的弹性框，以便所有列始终水平居中。下面提到的标记适用于firefox，chrome和Android，但在iOS和Safari上失败。我还没有测试过IE。

HTML：

<!-- The fourth column falls down -->
<div class='row row-1 text-center'>
    <div class="col-xs-3 red">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
</div>
<!-- Works Fine and centers the columns -->  
<div class='row text-center'>
    <div class="col-xs-3 red">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
</div>

CSS：

.row {
    display: flex;
    display: -webkit-flex; 
    flex-wrap:wrap;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: center;
            justify-content: center;
}
div[class^=col-] {
  float: none;  
  display: inline-block;
  vertical-align: top;
}

在Chrome，Firefox和Android上

在Safari和iOS上

JSFIDDLE

是否有任何我应该添加到列中的内容，以便它们出现在一行中。

Answer 1

导致问题的pseudo-element .row。

  

这是因为Safari浏览器会对:before和:after进行处理   伪元素就好像它们是真实元素一样。

尝试

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

或更好地创建一个类，.flex并执行此操作

.flex{
     display: flex;
    display: -webkit-flex; 
    flex-wrap:wrap;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: center;
            justify-content: center;
}
.flex:before, .flex:after{
   display: none;
}

<强> FIDDLE

Answer 2

如果仍然有人找不到解决方案，我遇到了一个问题，即我的列在 Safari 中很高：

为了解决这个问题，我简单地添加了这个 CSS 选择器（我知道 !important 不是最佳实践，但我尝试了几种解决方案并最终解决了这个问题）：

.d-flex {
    display: block !important;
}

现在，我的列看起来像这样，这就是它最初在 Chrome、Firefox 等中的样子：