html - Bootstrap : fixed space between columns?

Question

我需要制作响应式图片网格。我正在使用 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>

Answer 1

是否可以为网格中的图像添加边距:

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

另一种方法是在每个控制间距的图像周围添加一个 shiv 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>