如何正确构建具有行跨度的 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