Bootstrap 3.3.7：如何让四个col-xs-2宽度的div在一行居中？

首先看你当前的代码，每个col-sm-2都加了col-sm-offset-1，这会导致每个div左侧都有1列的偏移，最终整体是左对齐的（总宽度刚好占满12列，但左边有1列偏移，右边没有）。要实现居中，我们需要让左右两侧的空白相等，同时保证四个div在同一行。下面给你两种可行的方案：

方案一：嵌套容器实现整体居中 #

把四个div放在一个宽度合适的列容器里，再给这个容器加左右相等的偏移，这样整体就居中了：

<div class="container">
  <div class="row">
    <!-- 用col-sm-8包裹四个col-sm-2，总宽度8列，offset-2让左右各留2列空白 -->
    <div class="col-sm-8 col-sm-offset-2">
      <div id="first" class="col-sm-2 rec"></div>
      <div id="second" class="col-sm-2 rec"></div>
      <div id="third" class="col-sm-2 rec"></div>
      <div id="four" class="col-sm-2 rec">sss</div>
    </div>
  </div>
</div>

解释：Bootstrap栅格是12列系统，四个col-sm-2总宽度是8列（4×2），col-sm-8刚好容纳它们，再加上col-sm-offset-2，让这个容器左侧偏移2列，右侧自然也剩下2列空白，完美实现居中。而且Bootstrap的列默认带有左右padding，四个div之间会自动产生间距，不需要额外加offset。

方案二：直接调整第一个div的偏移 #

如果不想嵌套容器，也可以直接修改第一个div的偏移值，去掉后面div的offset，让左右空白相等：

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

解释：第一个div左侧偏移2列，四个div总宽度8列，加起来是10列，右侧剩下2列空白，左右空白相等，整体居中。

适配移动端（如果你需要col-xs-2） #

如果你是想在移动端（xs尺寸）也实现同样的效果，只需要把所有sm前缀换成xs即可，比如：

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

最后提醒一下：如果你的.rec类有自定义的margin，要注意不要让总宽度超过12列，否则会导致换行哦。

内容的提问来源于stack exchange，提问作者Web R