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

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

Рисунок 1 Пример

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

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

css html twitter-bootstrap grid grid-system Greg
источник

Пожалуйста, опубликуйте HTML / CSS, который вы уже пробовали.

Стив Сандерс

Попробуйте это: jsfiddle.net/KXje2/9 Я отредактировал свою скрипку, чтобы приспособить ее к большим маленьким экранам.

BuddhistBeast

Разве вышеприведенный код будет работать для вас ...?

BuddhistBeast

Bootstrap версия 3.x

Как всегда, прочитайте отличную документацию Bootstrap:

3.x Документы : https://getbootstrap.com/docs/3.3/css/#grid-nesting

Убедитесь, что строка родительского уровня находится внутри .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>

Bootstrap версия 4.0

4.0 Документы : http://getbootstrap.com/docs/4.0/layout/grid/#nesting

Вот обновленная версия для 4.0, но вы действительно должны прочитать весь раздел документации по сетке, чтобы понять, как использовать эту мощную функцию

<div class="container">
  <div class="row">
    <div class="col big-box">
      image
    </div>

    <div class="col">
      <div class="row">
        <div class="col mini-box">1</div>
        <div class="col mini-box">2</div>
      </div>
      <div class="row">
        <div class="col mini-box">3</div>
        <div class="col mini-box">4</div>
      </div>
    </div>

  </div>
</div>

Демо в Fiddle jsFiddle 3.x | jsFiddle 4.0

Который будет выглядеть следующим образом ( с небольшим добавлением стиля ):

Скриншот

KyleMit
источник

Извините, что похитил 1-летнюю тему, но знаете ли вы, как получить 0px между изображением и 1 и 3

alex

@alex, конечно - просто установите margin: 0;на .mini-boxэлемент. Мой пример просто добавляет один для ясности, но вы можете просто удалить строку. Вот демоверсия

KyleMit,

почему нет строки между col для минибокса 2 и col для минибокса 3? а что будет если будет?

Пашуте

@pashute, смотрите сетку Bootstrap 3, действительно ли имеет значение, сколько столбцов в строке? , Каждый мини-бокс занимает 50% доступного пространства (ограничено столбцом), поэтому два занимают первый ряд. Любые лишние будут просто перенесены в новую строку. Вы также можете объединить каждый из них в ряды, но вам это не нужно. По умолчанию Bootstrap переносится, поэтому вам не нужно загромождать разметку новыми строками. Если это семантически значимо, я бы сказал, пойти на это. Но если вы просто отображаете список из 4 объектов, держите их в одной строке.

KyleMit

@ user3921890, это слишком большая тема для ответа в строке комментария. Можете ли вы опубликовать новую ветку, объясняющую, что вы пытаетесь сделать, и хотя бы одну попытку сделать это, а затем ссылку на это здесь.

KyleMit

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

Ответы:

Bootstrap версия 3.x

Bootstrap версия 4.0

Демо в Fiddle jsFiddle 3.x | jsFiddle 4.0