使用布尔玛 CSS 框架。
我正在尝试布局一些元素，但我不确定为什么在桌面视图中，项目一旦通过视口就不会进入下一行。
这是一个示例代码和一个 JS Bin 的相应链接：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.min.css">
<title>JS Bin</title>
</head>
<body>
<div class="columns">
<div class="column is-one-quarter">
Col 1
</div>
<div class="column is-one-quarter">
Col 2
</div>
<div class="column is-one-quarter">
Col 3
</div>
<div class="column is-one-quarter">
Col 4
</div>
<div class="column is-one-quarter">
Col 5
</div>
</div>
<div class="columns">
<div class="column is-4">
column is-4
</div>
<div class="column is-4">
column is-4
</div>
<div class="column is-4">
column is-4
</div>
<div class="column is-4">
column is-4
</div>
<div class="column is-4">
column is-4
</div>
</div>
</body>
</html>我创建了一个简单的 JS Bin 来说明这个问题。
http://jsbin.com/juquzexezu/edit?html，输出
请注意，当您扩大输出窗口时，您会看到第一行上的 Col-5 div 未显示，并且在第二行上，剩余的两个 div 元素也未显示。
我正在寻找的是让那些缺少的 div 元素在水平视图已经被填充时自动转到下一行。