Вложенные строки с сеткой бутстрапов?

Я хочу 1 увеличенное изображение с 4-мя меньшими изображениями в формате 2x2 следующим образом:

Figure 1 Example

Моя первоначальная мысль заключалась в том, чтобы разместить все в одном ряду. Затем создайте два столбца, а во втором столбце создайте два ряда и два столбца для создания эффекта 1x1 и 2x2.

Однако это не представляется возможным, или я просто не делаю это правильно?

Ответы

Ответ 1

Вы можете легко вставлять строки в bootstrap. Убедитесь, что строка родительского уровня находится внутри элемента .container. Всякий раз, когда вы хотите вложить строки, просто откройте новый .row внутри вашего столбца.

Вот простой макет, чтобы построить:

<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>

Демо в скрипте

Что будет выглядеть (с небольшим добавлением стиля):

screenshot

Ответ 2

Добавляя к тому, что сказал @KyleMit, рассмотрите возможность использования классов col-md- * для больших/внешних столбцов и классов col-xs- * для меньших/внутренних столбцов. Это будет полезно при просмотре страницы на разных размерах экрана. На маленьком экране, тогда, когда возможно, будут размещены более крупные/внешние столбцы при сохранении меньших/внутренних столбцов.