相关疑难解决方法(0)

的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

是否有任何我应该添加到列中,以便它们出现在一行中.