使用Bulma 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,output
请注意,当您扩展输出窗口时,您会看到第一行上的Col-5 div未显示,并且在第二行上,还没有显示剩余的两个div元素.
我正在寻找的是当水平视图已经填充时,将那些缺少的div元素自动转到下一行.