Flexbox在Safari中包装第一行的最后一列 [英] Flexbox wraps last column of the first row in Safari

问题描述

在Safari和其他一些基于iOS的浏览器中查看时，第一行的最后一列将换行到下一行.

The last column of the first row is wrapped to the next line when viewing in Safari, and some other iOS based browsers.

Safari:

Chrome浏览器/其他:

代码:

.flexthis {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexthis .col-md-4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

<div class="row flexthis">
  <div class="col-md-4 col-sm-6 text-center">
    <div class="product">
      <img src="img.jpg" alt="" class="img-responsive">
      <h3>Name</h3>
      <p>Description</p>
    </div>
  </div>
</div>

推荐答案

只需更新我的问题

这是我要使用的解决方案，这显然是与Flexbox兼容的Bootstrap4修复的.因此，这仅适用于bootstrap3.

This is the solution I go with, this is obviously fixed for Bootstrap4, which is flexbox compatible. So this is only for bootstrap3.

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

这篇关于Flexbox在Safari中包装第一行的最后一列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！