Flexbox 在 Safari 中包装第一行的最后一列

中包装第一行的最后一列

关注

发信

关注(28)粉丝(399)

本文介绍了Flexbox 在 Safari 中包装第一行的最后一列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Safari:

Chrome/其他:

代码:

.flexthis {显示:-webkit-box；显示:-webkit-flex；显示:-ms-flexbox；显示:弹性；-webkit-flex-wrap:包裹；-ms-flex-wrap:包裹；flex-wrap: 包裹;}.flexthis .col-md-4 {显示:-webkit-box；显示:-webkit-flex；显示:-ms-flexbox；显示:弹性；}


<div class="col-md-4 col-sm-6 text-center"><div class="product"><img src="img.jpg" alt="" class="img-responsive"><h3>名称</h3><p>描述</p>

解决方案

只是为了更新我的问题

这是我采用的解决方案，这显然适用于与 flexbox 兼容的 Bootstrap4.所以这仅适用于 bootstrap3.

.row.flexthis:after, .row.flexthis:before{显示:无；}

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 / Others:

Code:

.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>

解决方案

Just to update on my question

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

08-31 03:08