Как сверстать правые блоки с помощью сетки бутстрап 3?

Question

[Raul Abdullin]

Верстаю, используя сетку Бутстрап. Подскажите, как сверстать эти 4 квадратика справа. Т.е. левый текст занимает col-md-6, каждый из квадратиков col-md-3, но как сделать второй ряд квадратиков, чтобы они встали друг под другом? Просто если всем 4м квадратам задать col-md-3, то второй ряд квадратов встанет под текстом слева. Прикрепляю скрин дизайна.

Comments

[Виктор Таран]

кто вам мешает их собрать в див ?
Притом с колом, в таком случае вы сможете и адаптив на них раскидать.

Answer 1

[Владимир]

<div class="container">
  <div class="row">
    <div class="col-md-6">
      left block
    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-6">
          <div class="right-block">
            right block
          </div>
        </div>
        <div class="col-md-6">
          <div class="right-block">
            right block
          </div>
        </div>
        <div class="col-md-6">
          <div class="right-block">
            right block
          </div>
        </div>
        <div class="col-md-6">
          <div class="right-block">
            right block
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Comments

[Raul Abdullin]

спасибо огромное

Answer 2

[Андрей]

Попробуйте так (код скорее всего не рабочий, но принцип должен быть понятен)

<div class="col-lg-6"></div>
<div class="col-lg-6">
    <div class="col-lg-6"></div>
    <div class="col-lg-6"></div>
    <div class="col-lg-6"></div>
    <div class="col-lg-6"></div>
</div>

Comments

[Василий Варюхин]

Схематично.

[Evgeny Zaharov]

Я бы использовал дочерние дивы в вашем коде как врапперы, задал бы им паддинг со всех сторон, а в их содержимом уже бы сделал блоки, которые нужны автору. Так и с отступами разбираться не надо, и все красиво выглядит) Единственное, что могут требования к верстке ограничить такую реализацию)