twitter-bootstrap Bootstrap 3 网格列的高度相同

Same height for Bootstrap 3 grid columns

提问by KevinH

What I have

我有的

I have some Bootstrap 3 Grid columns with different heights:

我有一些不同高度的 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>

Which looks like this:

看起来像这样：

What I want

我想要的是

I want to add an additional class (e.g. .row-aligned) to .rowto achieve that all abreast "cols" have the same height.

我想添加一个额外的类（例如.row-aligned）.row来实现所有并排的“列”具有相同的高度。

Which should look like this:

应该是这样的：

My attempt

我的尝试

Because I don't need to support old browsers I can use flexbox. My attempt is quiet easy and works in all browsers but not in Safari (version 9.1, Mac OSX 10.10):

因为我不需要支持旧浏览器，所以我可以使用 flexbox。我的尝试很简单，适用于所有浏览器，但不适用于 Safari（9.1 版，Mac OSX 10.10）：

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

I prepared a Demo here.

我在这里准备了一个Demo。

Safari Bug

Safari 错误

As I said, Safari cannot handle this flexbox style and the result looks like this:

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

(I found out that adding margin-left: -1pxseems to fix the issue, but it is not a good solution, because it will move everything 1 pixel left which can hide borders or something else.)

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

My question

我的问题

Do you have any idea how I can fix this bug in Safari? Or do I use flexbox wrong? Or is there a better solution without using flexbox?

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

回答by KevinH

The solution is to "remove" the display: tablewhich is set to .row::before:

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

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

    &::before {
        display: block;
    }
}

Demo

演示