Flexbox在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中包装第一行的最后一列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！