Question

我有这个Bootstrap网格：

<div class="row">
    <div class="col-md-2 col-md-offset-8">
        <img src="img/photo1.jpg" class="img-responsive">
    </div>
    <div class="col-md-2 col-md-offset-10">
        <img src="img/photo2.jpg" class="img-responsive">
    </div>
</div>

我想在左边留一个8-col空间，然后在右边有两个图像，都在同一行。但我上面的代码将第二张照片放在第一张照片的右下方。因此，行高增加了一倍。

我该如何解决这个问题？

Answer 1

只需从第二张照片的包装中删除偏移量，你就应该好了。在Bootstrap中，列的总数必须是12，但是你有2 + 8 = 10，然后再次2 + 8 = 10，总共20，所以它会跳一条线。如果从第二张图像中删除偏移量，它应该很好地将自己放在另一张图像旁边，那么它将是2 + 8 + 2 = 12。

<div class="row">
    <div class="col-md-2 col-md-offset-8">
        <img src="img/photo1.jpg" class="img-responsive">
    </div>
    <div class="col-md-2">
        <img src="img/photo2.jpg" class="img-responsive">
    </div>
</div>

以下是演示：http://www.bootply.com/gVhppNNe7M

Bootstrap网格偏移行高度扩展

1 个答案: