中心四个div连续引导

Question

我正在使用bootstrap 3.3.7 。我有一个四个div，其宽度基于引导程序的col-xs-2。 这是我的代码：

<div class="container">
  <div class="row">
    <div id="first" class="col-sm-2 col-sm-offset-1 rec">
    </div>
    <div id="second" class="col-sm-2 col-sm-offset-1 rec">
    </div>
    <div id="third" class="col-sm-2 col-sm-offset-1 rec">
    </div>
    <div id="four" class="col-sm-2 col-sm-offset-1 rec">
    sss
    </div>
  </div>
</div>

CSS：

.rec {
  height: 100px;
}
#first {
  background-color: red;
}
#second {
  background-color: blue;
}
#third {
  background-color: yellow;
}
#four {
  background-color: green;
}

我希望四个div将位于屏幕的中心，我还无法实现它 - 请参阅小提琴：https://jsfiddle.net/ptwbn2av/483/

如果你有一个没有col-sm-offset的想法，它也会很好。