如何使用Bootstrap3将带最大宽度的3列居中对齐于行内？

嘿，我懂你想把三个带固定max-width的列在row里居中的需求，原来用空列占位的方法确实不够灵活，这里给你两个更靠谱的方案：

方案一：自定义样式实现自适应居中（推荐） #

这个方法不需要手动计算空列宽度，不管屏幕尺寸怎么变，只要列能在一行显示，就会自动居中，响应式表现也更友好。

完整代码示例 #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
  .center-col {
    /* 取消Bootstrap列默认的浮动属性 */
    float: none;
    /* 改成行内块级元素，让父元素的text-center能生效 */
    display: inline-block;
    /* 保证列顶部对齐，避免内容高度不同时出现错位 */
    vertical-align: top;
    /* 你的自定义最大宽度 */
    max-width: 300px;
    /* 可选：增加列之间的间距，让布局更美观 */
    margin: 0 10px;
  }
</style>
<div class="container-fluid">
  <div class="row text-center">
    <div class="col-sm-3 center-col">
      <h4>box 1</h4>
      <p>some text dfgdfgdfgdfg</p>
    </div>
    <div class="col-sm-3 center-col">
      <h4>box 2</h4>
      <p>some text dfgdfgdfgdfg</p>
    </div>
    <div class="col-sm-3 center-col">
      <h4>box 3</h4>
      <p>some text dfgdfgdfgdfg</p>
    </div>
  </div>
</div>

原理说明 #

Bootstrap3的.col-sm-*默认是float: left，所以父元素的text-center对它们不起作用。我们通过float: none取消浮动，再用display: inline-block让列变成可以被text-center控制的行内块元素，这样就能轻松实现居中。

如果想让小屏幕（比如手机端）列自动堆叠，只需要把样式包在媒体查询里：

@media (min-width: 768px) {
  .center-col {
    float: none;
    display: inline-block;
    vertical-align: top;
    max-width: 300px;
    margin: 0 10px;
  }
}

方案二：使用栅格偏移类（适合固定宽度场景） #

如果你确定三个列的总宽度是固定值，也可以用Bootstrap自带的col-sm-offset-*类来实现居中。比如三个col-sm-3总占9份栅格，剩下3份可以分成左右各1.5份，但Bootstrap偏移类只支持整数，所以可以给第一列加col-sm-offset-1，再给列补一点自定义margin来填补剩余空间：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
  .custom-col {
    max-width: 300px;
    margin-right: 15px;
  }
</style>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-sm-offset-1 custom-col">
      <h4>box 1</h4>
      <p>some text dfgdfgdfgdfg</p>
    </div>
    <div class="col-sm-3 custom-col">
      <h4>box 2</h4>
      <p>some text dfgdfgdfgdfg</p>
    </div>
    <div class="col-sm-3 custom-col">
      <h4>box 3</h4>
      <p>some text dfgdfgdfgdfg</p>
    </div>
  </div>
</div>

不过这个方法需要手动计算偏移和margin，当列宽变化时还要重新调整，所以更推荐方案一。

内容的提问来源于stack exchange，提问作者The Legendary Programmer