如何将bootstrap中的列对齐到中心？

Question

在以下代码中：我想动态添加列。因此，行中可以没有，单个或最多四个col-sm-3列。无论有多少列，内容应始终显示在中间。

      <div class="row">

          <div class="col col-sm-3 col-xs-6">
                    <div class="servicesContent">

                        <img src="a.jpg" class="img-responsive" />

                        <p class="servicesContentTitle">lorem ipsum</p>

                    </div>
                </div>

          </div>

为实现这一目标，我使用了以下代码：

.row{
    text-align:center;
}
.col{
    float:none;
    display:inline-block;
}

这可以完成三列的工作，但是当我有四个col-sm-3时，它就会崩溃，如下所示：

对于行中任何可能数量的列，在中心处完美对齐的正确css是什么。

Answer 1

您必须为列设置最大宽度。请参阅下面的示例

@media(min-width: 992px){
    .col{
        float:none;
        display:inline-block;
        max-width: 250px;
    }
}

@media(min-width: 320px) and (max-width: 992px){
    .col{
        float:none;
        display:inline-block;
        max-width: 100%;
    }
}

Answer 2

这可能是因为四个对象正在填满整行（添加边距和填充时）。如果您更改列的填充和/或边距，则应该＆＃39;能够解决这个问题。