因为我从不需要在.row中仅居中一个.col-，所以我将以下类设置为目标列的.row的包装。

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

例子

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>

Bootstrap 4解决方案:

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>

这可能不是最好的答案，但有一个更有创意的解决方案。正如koala_dev所指出的，列偏移只适用于相等的列大小。然而，通过嵌套行，您也可以实现居中不均匀的列。

坚持最初的问题，你想要在12个网格中居中一列1。

将2的列居中，使其偏移5 创建一个嵌套行，这样在2列中就有了新的12列。 因为你想要居中1列，而1是2的“一半”(我们在步骤1中居中)，现在你需要在嵌套行中居中一个6列，这很容易通过偏移3来实现。

例如:

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

看到这里，请注意，你必须增加输出窗口的大小，以便太看到结果，否则列将自动换行。

我处理列居中的方法是对列使用display: inline-block，对父容器使用text-align: center。

你只需要将CSS类“居中”添加到行。

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSFiddle: http://jsfiddle.net/steyffi/ug4fzcjd/

Bootstrap 3现在有一个内置的类。center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

如果你还在用2。X然后把它添加到你的CSS。

因为我从不需要在.row中仅居中一个.col-，所以我将以下类设置为目标列的.row的包装。

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

例子

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>