在 Bootstrap 中将动态数量的 col div 居中

Question

我想在引导程序中将动态数量的 col 项集中在一行中。我试图找到一种使用 Bootstrap 执行此操作的方法，但它似乎完全丢失了。

使用 bootstrap 的人都知道 - 列移到最左边。您可以将动态数量的 col 项目放入一行 - 它不需要加起来 12（所以请不要建议这样做）。如果您要动态排列项目列表，这一点很重要。您可以根据需要在一行中设置任意数量的列。

我想要做的就是确保 - 无论一行中有多少项目 - 它们都位于窗口的中心。它们都将类似于：class="col-lg-2 col-md-3 col-sm-4 col-xs-6"。示例：

<div class="container">
    <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
            <div class="panel panel-default">
                <div class="panel-body">
                    Something here 1
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
            <div class="panel panel-default">
                <div class="panel-body">
                    Something here 2
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
            <div class="panel panel-default">
                <div class="panel-body">
                    Something here 3
                </div>
            </div>
        </div>
    </div>
</div>

可能有 1、2、3 或更多。我不知道，因为服务器排列的列表中有多少项目。无论哪种方式，我都需要将整行居中，无论其中有多少面板。

我知道我可以在视图中使用服务器端代码对 div 进行编程，但这会变得相当复杂。在 Bootstrap 中必须有一些方法可以实现这一点！我只是还没有找到它。我已经阅读了大量的 SO 答案，但没有一个与我想做的事情有关。我不知道为什么它不允许您简单地将行放在中心 - 非常令人沮丧。

我只想将行列居中。

Answer 1

您可以在行上使用居中的类，并使用以下 css 工作小提琴附加。

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

http://jsfiddle.net/ug4fzcjd/64/