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>

2 ответа

  1. Лучший способ сделать это-не изменять 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.

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

    .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>