web-dev-qa-db-ja.com

Bootstrap flexboxの列は、iOSとSafariで適切な幅をとっていません

bootstrap列でフレックスボックスを使用して、すべての列が常に水平方向に中央に配置されるようにしようとしています。以下で説明するマークアップは、Firefox、chrome and = 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の場合

enter image description here

SafariとiOSの場合

enter image description here

[〜＃〜] jsfiddle [〜＃〜]

1行に表示されるように列に追加する必要があるものはありますか。

ioscsssafariflexbox
12
Kiran Dash

問題の原因は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;
}

[〜＃〜]フィドル[〜＃〜]

25
Jinu Kurian