Как правильно выставить 4 или 3 ячейки в ряд в bootstrap?

Question

[Виталий]

Простите за глупый вопрос, но как мне сделать с помощью бутстрапа, что то вроде :

либо так же но с 4 ячейками
По краям тоже отступы.
Если ставлю col-md-offset-1 то первые 2 ячейки норм, 3 прижимается к правой стенке, а 4 уходит вниз

<div class="container">
      <div class="row-" style="background-color: #1b6d85;height: 600px">
        <div class="col-md-4  col-md-offset-1 " style="background-color: red; height: 300px"></div>
        <div class="col-md-4  col-md-offset-1" style="background-color: #3132ff;height: 300px"></div>
        <div class="col-md-4  col-md-offset-1" style="background-color: #43ff4e;height: 300px"></div>
        <div class="col-md-3  col-md-offset-1" style="background-color: #ff33fd;height: 300px"></div>

      </div>
    </div>

Answer 1

[Алексей Беспалов]

<div class="container">
  <div class="row" style="background-color: #1b6d85;height: 600px">
     <div class="col-md-4" style="background-color: red; height: 300px"></div>
     <div class="col-md-4" style="background-color: #3132ff;height: 300px"></div>
     <div class="col-md-4" style="background-color: #43ff4e;height: 300px"></div>
  </div>
</div>

Либо

<div class="container">
  <div class="row" style="background-color: #1b6d85;height: 600px">
      <div class="col-md-3" style="background-color: red; height: 300px"></div>
      <div class="col-md-3" style="background-color: #3132ff;height: 300px"></div>
      <div class="col-md-3" style="background-color: #43ff4e;height: 300px"></div>
      <div class="col-md-3" style="background-color: #43ff4e;height: 300px"></div>
  </div>
</div>

У вас в строке должно быть в сумме 12. То есть 3+3+3+3 либо 4+4+4

Answer 2

[Elwen]

Есть несколько вариантов, что бы сделать отступы. Наглядно можно посмотреть тут - https://jsfiddle.net/533pnb2u/
1 Вариант
4 ячейки шириной в 2 столбца и отступами в 2 столбца (2 + 4*2 + 2 = 12).

<div class="container">
  <div class="row">
    <div class="col-xs-2 col-xs-offset-2"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
  </div>
</div>

3 ячейки шириной в 2 столбца и отступами в 3 столбца (3 + 3*2 + 3 = 12).

<div class="container">
  <div class="row">
    <div class="col-xs-2 col-xs-offset-3"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
  </div>
</div>

2 Вариант
4 ячейки шириной в 3 столбца (4*3) с отступом в половину расстояния между столбцами за счет отсутствия обертки .row. На 3 ячейки разбивка по аналогии.

<div class="container">
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
</div>

3 Вариант
Сделать обертку в виде ячейки с отступом, а внутрь добавить новую сетку с необходимым кол-вом ячеек. На 3 ячейки разбивка по аналогии.

<div class="container">
  <div class="row">
    <div class="col-xs-10 col-xs-offset-1">
      <div class="row">
        <div class="col-xs-3"></div>
        <div class="col-xs-3"></div>
        <div class="col-xs-3"></div>
        <div class="col-xs-3"></div>
      </div>
    </div> 
  </div>
</div>

Answer 3

[Юрий]

Col-md-offset-1 это смещение на 1 ячейку слева. Всего их 12. Читайте доки. И понятно, что если вы 4+ 1+ 4+ 1+ 4+ 1 +3 конечно будет больше 12 и всё поедет. Читайте доки.
+ class row для строки.