你如何创建每行自动分配的小div广场？

Question

我知道这很简单，但我现在似乎无法弄明白。

我的页面显示通过div分隔的信息集，并且样式设置为＆＃34; box＆＃34;

我将动态显示不同数量的盒子（项目），所以我希望页面能够水平显示每个框ala＆＃34;文本包装＆＃34;样式，每个框保持其尺寸，但每行均匀分布，具体取决于可用的视口......

我尝试以引导方式执行此操作，但是列自动扩展/填充水平空间，基于coloumn大小调整... w / c是浪费..我的盒子是50x50像素，我只需要所有这些盒子均匀分布。

另外，我希望盒子居中..如果只有3个小盒子可以显示它们位于中心，而不是最左边。

我的代码到目前为止

HTML

<div class="row">
<div class="col-xs-12">
<div class="terminal_entry"> <span class="" > blah  </span></div>
<div class="terminal_entry"> <span class="" > blah  </span></div>
<div class="terminal_entry"> <span class="" > blah  </span></div>
<div class="terminal_entry"> <span class="" > blah  </span></div>
<div class="terminal_entry"> <span class="" > blah  </span></div>
</div>                                                            
</div><!-- /.row -->

CSS

.terminal_entry {
    width: 50px;
    height: 50px;
    background-color: #cccccc;
    margin: 3px;
    padding: 5px;
    float: left;
}

Answer 1

您可以使用转发器或循环来创建元素（具有类＆＃39; terminal_entry＆＃39;的div），并且对于样式尝试添加：

terminal_entry {
    Display: inline-block;
}

如果你制作课程的宽度＆＃39; col-xs-12＆＃39;大约165个持有三个div（每个div有50px宽度和5px填充），每行限制为3个。并居中尝试保证金：0自动。所以该容器的样式是：

col-xs-12 {
    width: 165px;
    margin: 0 auto;
    text-align: center;
}

我没有经过测试，而且我是通过手机进行测试的，但这就是我的想法。

Answer 2

正如@deebs所说，试试

display: inline-block

表示您的元素并将父级设置为

text-align: center.

这是一个JS小提琴，展示了你想要的功能：http://jsfiddle.net/stroz/EB5bC/