Question

我试图按顺序显示多个div（或标签）以填满整行并换行到下一行等等。如果我收缩我的窗口，他们应该调整，我最终每行更少的项目和更多的行滚动。不知何故，整个事情看起来像一张桌子。我使用Windows的本机Flow Layout控件在.NET中完成了这项工作。有关如何使用bootstrap在html5中执行此操作的任何想法？我在Angular 2上运行。如果我可以指定div的大小以使它们保持一致，那将是很好的，但是在这种情况下它们不适合内容。

感谢。

Answer 1

您正在寻找的是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

HTML5 Bootstrap流程布局

1 个答案: