使用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-row然后这样做

<div class="row flex-row">
  {{contents here..}}
</div>


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

小提琴