Bulmaグリッドレイアウトの列がビューポート上に広がる

Bulma CSS frameworkを使用する。Bulmaグリッドレイアウトの列がビューポート上に広がる

いくつかの要素をレイアウトしようとしていますが、デスクトップビューで、ビューポートを通過したアイテムが次の行に移動しない理由がわかりません。ここで

は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のビンを作成しました。

あなたは出力ウィンドウを広げるときは、1行目のCOL-5 DIVが図示されていないことがわかるであろう

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

注意、ならびに第二列に、残りの2つのDIV要素もありません表示されます。

私が探しているのは、水平ビューが既に塗りつぶされているときに、欠落しているdiv要素を自動的に次の行に移動させることです。

出典

2017-04-23 Angelo