html - 如何在 Bootstrap 中制作这样的表格？

Question

美好的一天。

告诉我如何在 Bootstrap 中映射这样的东西:

codepen.io/anon/pen/bqJdQJ

<div class="container-fluid">
<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-6">
                <img src="http://my.ln-family.com/image/banners/ban111.jpg" class="img-responsive">
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-12">
                        <img src="http://my.ln-family.com/image/banners/ban22.jpg" class="img-responsive">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <img src="http://my.ln-family.com/image/banners/ban33.jpg" class="img-responsive">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

左边一张大图，右边两张50%(或66/33)

做成两列，在右边两行没有问题，但是不行让右边的图片不超过左边的高度。

预先感谢您的帮助

Answer 1

左列中的图像宽度似乎超出了其父级。还有防止左右列折叠的边距

防止其他元素受到影响

将类名 left-col 添加到类名 col-md-6 的第一个 div

将类名 righ-col 添加到类名 col-md-6 的第二个 div

样式如下

.left-col{
  padding-right:0;
  margin-right:0;
}
.right-col{
  padding-left:0;
  margin-lrft:0''
}
.col-md-6 img{
  width:100%;
  height:100%;
}

下面的片段

pen is here