如何使用rowspan正确构造Bootstrap网格

Question

我的目标是在一个简单的网格结构中可视化三个图像，其中第一列占据两行，类似于rowspan = 2.

使用Bootstrap的row和col-*似乎很容易实现。当我试图在图像周围放一个小填充物时，问题就出现了。 我对CSS的经验很少，而且我的试错方法不起作用。我无法将图像1的顶部和底部边框与其他两个边界对齐。

那么，构建这样的布局的最佳实践是什么？我的代码的测试小提取在这里：https://jsfiddle.net/ae5wq61t/

Answer 1

如果使用嵌套行，此格式将更清晰，更容易。确保有一个容器包装它。我在右下角的行中提供了一个.bottom-right课程，然后将其margin-top调整为与左边的图片对齐。

HTML：

 <div class="container">  
   <div class="row">
    <div class="col-md-8">
         <img class="img-responsive" src="http://vivereconglianimali.altervista.org/wp-content/uploads/2013/04/Tartaruga-Marina.jpg" />
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-sm-12">
                <img class="img-responsive" src="http://vivereconglianimali.altervista.org/wp-content/uploads/2013/04/Tartaruga-Marina.jpg" />
            </div>
        </div>
        <div class="row bottom-right">
            <div class="col-sm-12">
                <img class="img-responsive" src="http://vivereconglianimali.altervista.org/wp-content/uploads/2013/04/Tartaruga-Marina.jpg" />
            </div>
        </div>
    </div>
   </div>
</div>

CSS：

.bottom-right{
   margin-top: 23px;
}

CODEPEN DEMO