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

196

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

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

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

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

— Greg
источник

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

— Стив Сандерс

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

— BuddhistBeast

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

— BuddhistBeast

299

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

В дополнение к тому, что сказал @KyleMit, рассмотрите возможность использования:

col-md-* классы для больших внешних столбцов
col-xs-* классы для меньших внутренних столбцов

Это будет полезно при просмотре страницы на экранах разных размеров.

На маленьком экране будет происходить перенос больших внешних столбцов при сохранении меньших внутренних столбцов, если это возможно

— ezzadeen
источник