Bootstrap 3网格列的高度相同

Posted 2023-03-07

【中文标题】Bootstrap 3网格列的高度相同

【英文标题】：Same height for Bootstrap 3 grid columns

【发布时间】：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 有没有更好的解决方案？

【问题讨论】：

你看到这个问题和所有不同的答案了吗？ ***.com/questions/19695784/…

是的，我确实看到了这个问题，但没有 flexbox 解决方案在 Safari 中有效，其他解决方案也不好。而且我也不想用 javascript 来解决这个问题。我发布了这个单独的问题，因为我更想了解为什么 flexbox 在 Safari 中不起作用。

可能重复：***.com/questions/34250282/…

【参考方案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;