Grid 几个引导布局问题

我有一个引导网格问题。我有6个项目要显示，当屏幕为MD时，每行显示3个项目，当屏幕为SM时，每行显示2个项目，当屏幕为XS时，每行显示1个项目。我也需要在左右两边留出一个空间。我有这个和它的工作除了下降到2跨，它有一个中间的空间？谢谢你的帮助

代码是：

<div class="container-fluid col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1">
<div id="services" class="container-fluid text-center">
  <h2>Middle text here</h2>
  <br>
  <div class="row slideanim">
    <div class="col-sm-4">
      <img alt="" height="42" src="images/earth.png" width="42" />
      <h4>1</h4>
      <h2>description<</h2>
    </div>
    <div class="col-sm-4">
      <img alt="" height="42" src="images/plane.png" width="42" />
      <h4>2</h4>
      <h2>description<</h4>
    </div>
    <div class="col-sm-4">
      <img alt="" height="42" src="images/headset.png" width="42" />
      <h4>3</h4>
      <h2>description<</h2>
    </div>
  </div>

  <div class="row slideanim">
    <div class="col-sm-4">
      <img alt="" height="42" src="images/bus.png" width="42" />
      <h4>4</h4>
      <h2>description<</h2>
    </div>
    <div class="col-sm-4">
      <img alt="" height="42" src="images/24phone.png" width="42" />
      <h4>5</h4>
      <h2>description<</h2>
    </div>
    <div class="col-sm-4">
      <img alt="" height="42" src="images/clock.png" width="42" />
      <h4>">5</h4>
      <h2>description</h2>
    </div>
  </div>
</div>
</div>

不需要嵌套多个容器。 记住引导使用12列布局。因此，如果希望一行中有两个项目，请使用class.col-{}-6。如果希望一行中有3个项目，请使用class.col-{}-4来组成总共12列。 偏移量类别已更改。请参阅文档。 小提琴：