Bootstrap 嵌套的行和 2 列未以相等的高度对齐

Question

您好，我已经搜索了所有人的解决方案，但无济于事。我目前正在使用引导程序，我有 1 行 2 列，右列有 2 个嵌套行。我左边有 1 个大图像，右边有 2 个较小的图像，但由于某种原因，我的大图像与右列没有正确对齐。我尝试过 flexbox，display: table，没有任何效果。当它到达移动视图的断点时，它会正确对齐（100% 宽度）x3，但对于稍微大一点的屏幕，它只会搞砸。如果有人可以提供帮助，请不胜感激！太感谢了。这是代码。

<div class="container">
    <div class="row">
        <div class="col-xs-6">
           <img src="http://placehold.it/832x532">
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-12"><img src="http://placehold.it/513x294"></div>
                <div class="col-xs-12"><img src="http://placehold.it/513x294"></div>

            </div>
        </div>
    </div>
</div>

Bootply

编辑： 它应该看起来像：

[           ] [Image 2 ]
[   Image 1 ] [        ]
[           ] [Image 3 ]
[           ] [        ]

两列的高度应相同。现在在我提供的 bootply 中，第一列比第二列短。

Answer 1

使用display: flex 到row 和嵌套列的非常简单的解决方案，您希望它们的高度相同。但是，与其重写 Bootstrap 的类，不如创建自己的类并在这种情况下使用它。

<div class="row equal">
  <div class="col-xs-6">
   // content
  </div>
  <div class="col-xs-6">
    // content
  </div>
</div>

.equal,
.equal > div[class*='col-'] {
  display: flex;
}

我使用您的代码创建了示例并使用了跨浏览器解决方案

JSFiddle