动态字段在底部到右响应式布局列

Question

我如何能实现具有相应的列（最多5），当我的字段显示动态要下到右：

但当窗口大小减少，布局应成为

我怎样才能在引导这样做呢？

谢谢！

Answer 1

您可以使用CSS3 multiple column layout：

的Html：

<ul> <li>field1</li> <li>field2</li> <li>field3</li> ... </ul>

CSS：

ul { list-style: none; -webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; }

对于浏览器支持CHEC k this link。这是一个example