使用 4 Bootstrap-3 Cols @270 设置 30px 装订线

Question

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

鉴于这个 1170 像素宽 的 4 列组合，四列中的每一列都设置为 270 像素宽和 30 像素的装订线，我似乎无法安排 Bootstrap 3 来强制使用 30 像素宽的装订线，以便左侧和右外列分别左对齐和右对齐，它们之间的间距相等。

这是我最终得到的结果：

代码块

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

CSS

.services-outer {}
.services-wrap.row {
    margin: 0;
}
.services-wrap.container {
    padding:0;
}
.services-wrap .col-md-3 {
    padding:0;
}

问题：鉴于 (4 x 270) + (3 x 30) = 1170，为什么 Bootstrap 不能均匀地排列列，我该如何在不影响响应时折叠时这样做？

BOOTPLY 谢谢@T30！

Answer 1

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

@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;
}

<div class="container">
  <div class="row service-row">
    <div class="col-xs-3 service">
      <img src="http://placehold.it/270x310" class="img-responsive">
    </div>
    <div class="col-xs-3 service">
      <img src="http://placehold.it/270x310" class="img-responsive">
    </div>
    <div class="col-xs-3 service">
      <img src="http://placehold.it/270x310" class="img-responsive">
    </div>
    <div class="col-xs-3 service">
      <img src="http://placehold.it/270x310" class="img-responsive">
    </div>
  </div>
</div>