Bootstrap sütunları ben tüm sütunlar her zaman yatay olarak ortalanmış şekilde önyükleme sütunlu esnek kutusunu kullanmaya çalışıyorum iOS ve Safari

Question

JSFIDDLE

üzerine doğru genişliği almıyoruz. Aşağıda belirtilen işaret, firefox, chrome ve Android için iyi çalışıyor ancak iOS ve safari'de başarısız oluyor. Henüz IE'yi test etmedim.

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: Saf On Chrome, Firefox ve Android

günü

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

Ari ve iOS

JSFIDDLE

onlar tek satırda görünecek şekilde ben sütunlara ekleyerek olmalıdır var birşey var mı.

Answer 1

.row numaralı soruna neden pseudo-element soruna neden oluyor.

Safari tarayıcısı gerçek unsurlar sanki :before ve :after sözde elemanları davranır çünkü bu olur.

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

deneyin veya daha iyi bir sınıf oluşturmak, .flex demek ve bilgi için bu

.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