Las columnas Bootstrap con flexbox no están tomando el ancho adecuado en iOS y Safari

JSFIDDLE

Estoy intentando utilizar el cuadro flexible con columnas de arranque para que todas las columnas estén siempre cinputs horizontalmente. El marcado mencionado a continuación funciona bien para Firefox, Chrome y Android, pero falla en iOS y Safari. No he probado IE todavía.

HTML:

<!-- The fourth column falls down --> <div class='row row-1 text-center'> <div class="col-xs-3 networking">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 networking">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; } 

En Chrome, Firefox y Android

introduzca la descripción de la imagen aquí

En Safari e iOS

introduzca la descripción de la imagen aquí

JSFIDDLE

¿Hay algo que debería agregar a las columnas para que aparezcan en una línea?

Es un pseudo-element en el .row que causa el problema. Esto sucede porque Safari trata :before y :after pseudo elementos como si fueran elementos reales.

Tratar

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

o mejor cree una class, digamos, .flex y haz esto

 .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; } 

VIOLÍN