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

执行此操作的最佳方法是不直接修改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文件中添加新类。

Answer 2

是否可以在网格中为图像添加边距：

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

Bootstrap：列之间的固定空间？

2 个答案: