布爾瑪網格佈局列擴展視口

我想佈局一些元素，我不知道爲什麼在桌面視圖上，項目一旦他們通過視圖端口不去到下一行。

下面是一個示例代碼和相應的鏈接到一個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