布尔玛网格布局列扩展视口

我想布局一些元素，我不知道为什么在桌面视图上，项目一旦他们通过视图端口不去到下一行。

下面是一个示例代码和相应的链接到一个JS斌：

<!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斌来说明问题。

http://jsbin.com/juquzexezu/edit?html,output

注意，当您加宽输出窗口，你会看到的第一行上的Col-5格中未示出，以及在第二行上，剩下的两个div元素也不正在显示。

我在找的是当水平视图已经被填充时，那些丢失的div元素会自动进入下一行。

来源

2017-04-23 Angelo