引导程序嵌套的行和2列的高度不相等

Question

嗨，我已经向每个人搜索了这个问题的解决方案，但没有结果。我目前正在使用引导程序，我有一行，两列，右列有两个嵌套行。我左边有一个大图像，右边有两个小图像，但由于某种原因，我的大图像与右列没有正确对齐。我试过flexbox，显示：表，什么都不管用。当它到达移动视图的断点时，它会正确对齐（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 ]
[           ] [        ]

两列的高度应相等。现在，在我提供的引导程序中，第一列比第二列短。

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