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

Question

您好，我已经搜索了每个人的解决方案，但无济于事。我目前正在使用 bootstrap，我有 1 行 2 列，右列有 2 个嵌套行。我的左边有 1 个大图像，右边有 2 个较小的图像，但由于某种原因，我的大图像没有与右栏正确对齐。我试过 flexbox, display: table，没有任何效果。当它遇到移动 View 的断点时，它会正确对齐(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