Вложенные строки с сеткой начальной загрузки?

135

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

Изображение 121

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

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

  • 0
    Пожалуйста, опубликуйте HTML / CSS, который вы уже пробовали.
  • 0
    Попробуйте это: jsfiddle.net/KXje2/9 Я отредактировал свою скрипку, чтобы приспособить для больших через очень маленькие экраны.
Показать ещё 1 комментарий
Теги:
grid
grid-system

2 ответа

220
Лучший ответ

Вы можете легко вставлять строки в 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>

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

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

Изображение 2374

Поделиться
  • 1
    Извините, что похитил 1-летнюю тему, но знаете ли вы, как получить 0px между изображением и 1 и 3
  • 2
    @alex, конечно - просто установите margin: 0; на .mini-box . Мой пример просто добавляет один для ясности, но вы можете просто удалить строку. Вот демо
Показать ещё 13 комментариев
1

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню