2017-01-01 85 views
0

我想按顺序显示一些div(或标签)来填充整行并换行到下一行等等。如果我缩小窗口,他们应该调整,我最终会减少每行的项目数量和更多的滚动行数。整个事情会以某种方式呈现出来。我使用Windows的本地流布局控件在.NET中执行了此操作。任何想法如何在html5中使用bootstrap做到这一点?我正在使用Angular 2.如果我可以指定div的大小来保持它们的对齐,那将是非常好的,但在这种情况下,它们不一定适合内容。HTML5引导流程布局

谢谢。

回答

0

您正在寻找的是Bootstrap网格系统。 http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

因此,例如,在一个大屏幕上,连续有三个项目。 在一个较小的屏幕上,会有两个。

<div class="col-md-12"> 
    <span class="col-md-4 col-xs-6">1 </span> 
    <span class="col-md-4 col-xs-6"> 2</span> 
    <span class="col-md-4 col-xs-6"> 3</span> 
    <span class="col-md-4 col-xs-6"> 4</span> 
    <span class="col-md-4 col-xs-6"> 55</span> 
    <span class="col-md-4 col-xs-6"> 6</span> 
</div> 

检查它在这里的行动http://codepen.io/anon/pen/pRzLav