Bootstrap: фиксированное пространство между столбцами?

Мне нужно сделать отзывчивую сетку изображений. Я использую Bootstrap Grid, но я хочу всегда иметь одинаковое вертикальное пространство между моими фотографиями.

<div class="container-project-show">
  <div class="row">
    <% @pictures.each do |picture| %>
      <div class="col-xs-12 col-sm-6 col-lg-4">
        <%= cl_image_tag picture.path %>
      </div>
    <% end %>
  </div>
</div>

Постоянный Dfoc, 27.12.2016 в 18:35 (источник)

2 ответа

Лучший способ сделать это-не изменять Bootstrap напрямую. Основная причина заключается в том, что при обновлении bootstrap все ваши изменения будут удалены. Поэтому вместо открытия bootstrap создайте (или измените) файл CSS. Вместо класть
```
<div class="container-project-show">
  <div class="row">
    <% @pictures.each do |picture| %>
      <div class="col-xs-12 col-sm-6 col-lg-4">
        <%= cl_image_tag picture.path %>
      </div>
    <% end %>
  </div>
</div>
```
делать:
```
<div class="container-project-show">
  <div class="row">
    <% @pictures.each do |picture| %>
      <div class="my-col-xs-12 my-col-sm-6 my-col-lg-4">
        <%= cl_image_tag picture.path %>
      </div>
    <% end %>
  </div>
</div>
```
Затем добавьте новые классы в новый файл CSS.
Jakxna360,
28.12.2016 в 00:37

Можно ли добавить поле к изображению в вашей сетке:

.container-project-show img {margin: 10px auto;}

Альтернативой было бы добавить заточку div вокруг каждого изображения, которое управляет расстоянием:

.pad-10 {margin: 10px auto;}

<div class="container-project-show">
  <div class="row">
    <% @pictures.each do |picture| %>
      <div class="col-xs-12 col-sm-6 col-lg-4">
        <div class="pad-10">
        <%= cl_image_tag picture.path %>
          </div>
      </div>
    <% end %>
  </div>
</div>