Bulma 网格布局列在视口上延伸

Question

我正在尝试布置一些元素，但我不确定为什么在桌面视图中，项目一旦通过视口就不会转到下一行。

这是一个示例代码和对应的 link 到 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

请注意，当您扩大输出 window 时，您会看到第一行的 Col-5 div 没有显示，第二行也没有显示，剩下的两个 div 元素也未显示。

我正在寻找的是当水平视图已经填充时，让那些缺失的 div 元素自动转到下一行。

Answer 1

https://bulma.io/documentation/columns/options/#multiline

在 columns div 上使用 class is-multiline。

Bulma 网格布局列在视口上延伸

Bulma Grid Layout Columns Extend Over Viewport

html

css

bulma