嵌套行与引导网格系统？ [英] Nested rows with bootstrap grid system?

问题描述

我想要1张较大的图片和4张较小的图片，格式如下：

我最初的想法是将一切都放在一行中。然后创建两个列，并在第二列中创建两行和两列以创建1x1和2x2效果。

但是，这似乎不可能，或者我只是不正确地做？

解决方案

您可以

I want 1 larger image with 4 smaller images in a 2x2 format like this:

My initial thought was to house everything in one row. Then create two columns, and, in the second column, create two rows and two columns to create the 1x1 and 2x2 effect.

However, this doesn't seem to be possible, or I am just not doing it correctly?

解决方案

You can easily nest rows in bootstrap. Make sure the parent level row is inside of a .container element. Whenever you'd like to nest rows, just open up a new .row inside of your column.

Here's a simple layout to build off of:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="big-box">image</div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6"><div class="mini-box">1</div></div>
                <div class="col-xs-6"><div class="mini-box">2</div></div>
                <div class="col-xs-6"><div class="mini-box">3</div></div>
                <div class="col-xs-6"><div class="mini-box">4</div></div>
            </div>
        </div>
    </div>
</div>

Demo in fiddle

Which will look like this (with a little bit of added styling):

这篇关于嵌套行与引导网格系统？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！