Я хочу 1 увеличенное изображение с 4-мя меньшими изображениями в формате 2x2 следующим образом:
Моя первоначальная мысль заключалась в том, чтобы разместить все в одном ряду. Затем создайте два столбца, а во втором столбце создайте два ряда и два столбца для создания эффекта 1x1 и 2x2.
Однако это не представляется возможным, или я просто не делаю это правильно?
Вы можете легко вставлять строки в 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>
Что будет выглядеть (с небольшим добавлением стиля):
Добавляя к тому, что сказал @KyleMit, рассмотрите возможность использования классов col-md- * для больших/внешних столбцов и классов col-xs- * для меньших/внутренних столбцов. Это будет полезно при просмотре страницы на разных размерах экрана. На маленьком экране, тогда, когда возможно, будут размещены более крупные/внешние столбцы при сохранении меньших/внутренних столбцов.