从下到右响应式布局列中的动态字段

【问题标题】：Dynamic Fields in Bottom to Right responsive layout columns从下到右响应式布局列中的动态字段
【发布时间】：2016-08-03 15:47:09
【问题描述】：

当我的字段从下到右动态显示时，如何实现具有响应式列（最多 5 个）：

但是当窗口大小减小时，布局应该变成

如何在引导程序中执行此操作？

谢谢！

【问题讨论】：

你有代码开始吗？你试过 flexbox 吗？

标签： html css angular-ui-bootstrap responsive

【解决方案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; }

对于浏览器支持检查this link。这是example

【讨论】：