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;
}

I prepared a Demo here.

Safari Bug

正如我所说，Safari无法处理这种Flexbox样式，结果如下：

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

我的问题

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

Answer 1

解决方案是＆＃34;删除＆＃34; .row::before设置为.aligned-row { display: flex; flex-flow: row wrap; &::before { display: block; } } ：

pi@raspberrypi:~ $ php -v
PHP Warning:  PHP Startup: Unable to load dynamic library '/usr/lib/php5/20131226/mosquitto.so' - /usr/lib/php5/20131226/mosquitto.so: cannot open shared object file: No such file or directory in Unknown on line 0
PHP 5.6.20-0+deb8u1 (cli) (built: Apr 28 2016 00:01:26)
Copyright (c) 1997-2016 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies
    with Zend OPcache v7.0.6-dev, Copyright (c) 1999-2016, by Zend Technologies

Demo