Bootstrap：列之间的固定空间？答案

【问题标题】：Bootstrap: fixed space between columns?Bootstrap：列之间的固定空间？
【发布时间】：2016-12-27 18:35:26
【问题描述】：

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

【问题讨论】：

标签： html css ruby-on-rails twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案2】：

最好的方法是不直接修改 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 文件中添加新的类。

【讨论】：