css - 使用 4 个 Bootstrap-3 Cols @270 设置 30px 间距

Question

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

给定这个 1170 像素宽的 4 列排版 ，四列中的每一列都设置为 270px 宽和 30px 装订线，我似乎无法安排 Bootstrap 3 强制 30px 宽装订线，以便左外列和右外列分别左对齐和右对齐，相等它们之间的排水沟。

这是我最终得到的:

代码块

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