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

发布时间：2020-12-17 20:38:57 所属栏目：安全来源：网络整理

导读：是)我有的我有一些不同高度的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 li

是)我有的

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

看起来像这样：

Bootstrap only style

我想要的是

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

这应该是这样的：

Cols with .row-aligned class

我的尝试

因为我不需要支持旧浏览器,所以我可以使用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样式,结果如下所示：

enter image description here

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

我的问题

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

解决方法

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

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

    &::before {
        display: block;
    }
}

Demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!