【问题标题】：Same height for Bootstrap 3 grid columnsBootstrap 3网格列的高度相同
【发布时间】：2016-09-21 22:43:29
【问题描述】：

我有什么

我有一些不同高度的 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 添加一个额外的类（例如.row-aligned），以实现所有并排的“列”具有相同的高度。

应该是这样的：

我的尝试

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

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

I prepared a Demo here.

Safari 错误

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

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

我的问题

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

【问题讨论】：

你看到这个问题和所有不同的答案了吗？ stackoverflow.com/questions/19695784/…
是的，我确实看到了这个问题，但没有 flexbox 解决方案在 Safari 中有效，其他解决方案也不好。而且我也不想用 Javascript 来解决这个问题。我发布了这个单独的问题，因为我更想了解为什么 flexbox 在 Safari 中不起作用。
可能重复：stackoverflow.com/questions/34250282/…

标签： twitter-bootstrap twitter-bootstrap-3 safari flexbox

【解决方案1】：

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

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

    &::before {
        display: block;
    }
}

Demo

【讨论】：

【解决方案2】：

向 row 添加一个类 display-flex，如下所示：

<div class="row display-flex">

然后添加这个 CSS 代码。

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

:)
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

【讨论】：