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

的jsfiddle

我正在尝试使用自举列的弹性框，以便所有的列都始终水平居中。 下面提到的标记适用于Firefox，Chrome和Android，但在iOS和Safari浏览器上失败。 我还没有testingIE。

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

这是导致问题的.row中的pseudo-element 。 发生这种情况是因为Safari会:before伪元素:before和:after仿佛它们是真实的元素。

尝试

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

或者更好地创build一个类，说.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; } 

小提琴