Question

您好我已经搜索过每个人的解决方案，但无济于事。我目前正在使用bootstrap，我有一行，2列，右列有2个嵌套行。我左边有一个大图像，右边有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

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

1 个答案: