5

使用布尔玛 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，输出

请注意，当您扩大输出窗口时，您会看到第一行上的 Col-5 div 未显示，并且在第二行上，剩余的两个 div 元素也未显示。

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

4

1 回答 1

14

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

使用divis-multiline上的类。columns

于 2017-07-15T21:01:36.070 回答