使用Flexbox的Bootstrap列在iOS和Safari上没有采用适当的宽度 [英] Bootstrap columns with flexbox are not taking proper width on iOS and Safari

问题描述

JSFIDDLE

有什么我应该添加到列，以便他们出现在一行。 / p>

解决方案

导致问题的.row中的伪元素发生这种情况是因为Safari在和之后处理：伪元素，就好像它们是真实元素一样。



尝试



  .row：before，.row：after { 
 display：none; 
 
 
 
 $ b $ p 
 $ b 
或者更好的创建一个类， .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; 
 
  
   FIDDLE   
 
JSFIDDLE

I am trying to use flex box with bootstrap columns so that all the columns are always horizontally centered. The markup mentioned below works fine for firefox, chrome and Android but fails on iOS and safari. I haven't tested IE yet.

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;
}
On Chrome, Firefox and Android



On Safari and iOS



JSFIDDLE

Is there anything that I should be adding to the columns so that they appear in one line.
解决方案
It's pseudo-element in the .row causing the problem. This happens because Safari treats :before and :after pseudo-elements as if they were real elements. 

Try 
 .row:before, .row:after{
      display: none;
    }
or better create a class say, .flex and do this
.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

                        
这篇关于使用Flexbox的Bootstrap列在iOS和Safari上没有采用适当的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！