css - 在 Bootstrap 中实现复杂的网格

Question

是否可以在 bootstrap 中实现附加网格？每个方 block 都可能是一张图片……或者可能是文本!

我试过了，但是当涉及到左上角的框时遇到了障碍，例如跨越两行的框。

网格:

Answer 1

只要您需要网格跨越多行，就可以使用嵌套 block 。 像这样:

<div class="row">
    <div class="col-sm-6"></div>
    <div class="col-sm-6">
        <div class="row">
            <div class="col-sm-6"></div>
            <div class="col-sm-6"></div>
        </div>        
        <div class="row">
            <div class="col-sm-6"></div>
            <div class="col-sm-6"></div>
        </div>
    </div>

    <div class="col-sm-8">
        <div class="row">
            <div class="col-sm-8"></div>
            <div class="col-sm-4"></div>
        </div>
        <div class="row">
            <div class="col-sm-4"></div>
            <div class="col-sm-8"></div>
        </div>
    </div>
    <div class="col-sm-4"></div>
</div>

然后您可以设置 block 的高度，您的网格就可以使用了。