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

Question

我想在bootstrap中连续居中动态数量的col项.我试图用Bootstrap找到一种方法,但似乎完全没有了.

使用bootstrap的人会知道 - cols移动到最左边.您可以将动态数量的col项放入一行 - 它不需要添加到12(因此请不要建议它).如果您要动态地列出项目列表,这一点很重要.您可以根据需要连续添加任意数量的cols.

我想做的就是确保 - 无论行中有多少物品 - 它们都位于窗口的中央.它们都是这样的: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答案,但没有一个与我想做的事情有关.我不知道为什么它不会让你只是把行放在中心 - 非常令人沮丧.

我只是想把行cols居中.

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/