Bootstrap 3网格列的高度相同

Question

是)我有的

我有一些不同高度的Bootstrap 3 Grid列:

<div class="row">
  <div class="col-xs-4">Item 1</div>
  <div class="col-xs-4">Item 2 <br/> additional line
  </div>
  <div class="col-xs-4">Item 3</div>
  <div class="col-xs-6">Item 4 - This should be on a separate line</div>
</div>

看起来像这样:

我想要的是

我想添加一个额外的类(例如.row-aligned).row来实现所有并列"cols"具有相同的高度.

这应该是这样的:

我的尝试

因为我不需要支持旧浏览器,所以我可以使用flexbox.我的尝试很安静,适用于所有浏览器,但不适用于Safari(版本9.1,Mac OSX 10.10):

.aligned-row {
  display: flex;
  flex-flow: row wrap;
}

我在这里准备了一个Demo.

Safari Bug

正如我所说,Safari无法处理这种flexbox样式,结果如下所示:

(我发现添加margin-left: -1px似乎解决了这个问题,但它不是一个好的解决方案,因为它会将所有内容移动1个像素,这可以隐藏边框或其他东西.)

我的问题

你知道如何在Safari中修复这个bug吗？或者我使用flexbox错误？或者没有使用flexbox有更好的解决方案吗？

Answer 1

解决方案是"删除" display: table设置为.row::before:

.aligned-row {
    display: flex;
    flex-flow: row wrap;

    &::before {
        display: block;
    }
}

演示