Задать вопрос
@Scorpiored88
html

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

Простите за глупый вопрос, но как мне сделать с помощью бутстрапа, что то вроде :
71d27aadf0564c0fad59554bde7b1092.png
либо так же но с 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>
  • Вопрос задан
  • 4983 просмотра
Комментировать
Подписаться 2 Оценить Комментировать
Ответ пользователя Elwen К ответам на вопрос (3)
Elwen
@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>
Ответ написан
Комментировать
Комментировать