设置30px排水沟，配备4个Bootstrap-3 Cols @ 270

Question

我花了相当多的时间研究和尝试各种方法来达到预期的效果。最有帮助的帖子Bootstrap - columns with spacing几乎把我带到了那里。

考虑到这个4-col comp在1170px宽，四个列中的每一个设置为270px宽，30px排水沟，我似乎无法安排Bootstrap 3来强制30px宽的排水沟这样左右外柱分别左对齐和右对齐，它们之间有相同的排水沟。

以下是我最终的结果：

代码块

(?:\D|$)

CSS

  <!-- Four Services Columns -->
  <div class="services-wrap container">
    <div class="services-wrap row">
        <div class="col-md-3">
          <img src="http://placehold.it/270x310" class="img-responsive">
        </div>
        <div class="col-md-3">
          <img src="http://placehold.it/270x310" class="img-responsive">
        </div>
        <div class="col-md-3">
          <img src="http://placehold.it/270x310" class="img-responsive">
        </div>
        <div class="col-md-3">
          <img src="http://placehold.it/270x310" class="img-responsive">
        </div>
      </div>
    </div><!-- /. services-wrap -->

问题：鉴于（4 x 270）+（3 x 30）= 1170，为什么没有Bootstrap对列进行同等间隔，如何在不影响响应崩溃的情况下这样做？

BOOTPLY谢谢@ T30！

Answer 1

我能想到的最简单的方法是将每列填充15px并将行扩展为：

＆＃13;

＆＃13;

@category = Category.find(1)
@posts = @category.posts

<h1>Posts for <%= @category.name %></h1>
<% @posts.each do |post| %>
  ... you know the rest

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
 .service-row {
  margin: 0 -30px;
}
.service {
  padding: 0 15px;
}
.img-responsive {
  width: 100%;
  height: auto;
}

＆＃13;

＆＃13;

＆＃13;