使用Flexbox的Bootstrap列在iOS和Safari上没有采用适当的宽度 [英] Bootstrap columns with flexbox are not taking proper width on iOS and Safari
问题描述
有什么我应该添加到列,以便他们出现在一行。 / p>
导致问题的.row中的 尝试 或者更好的创建一个类, 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: CSS: On Chrome, Firefox and Android On Safari and iOS Is there anything that I should be adding to the columns so that they appear in one line. It's Try or better create a class say, 这篇关于使用Flexbox的Bootstrap列在iOS和Safari上没有采用适当的宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!伪元素
发生这种情况是因为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;
<!-- 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>
.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;
}
pseudo-element
in the .row causing the problem. This happens because Safari treats :before
and :after
pseudo-elements as if they were real elements. .row:before, .row:after{
display: none;
}
.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;
}