Question

我正在尝试布局一些元素，我不知道为什么在桌面视图上，一旦它们经过视口移动，就不会进入下一行。

这是一个示例代码和JS Bin的相应链接：

＆＃13;

DECLARE @tbl TABLE(ID INT IDENTITY,YourXml XML)
INSERT INTO @tbl VALUES
(
N'<record id="1">
  <field tag="DI" occ="1" lang="de-DE">Höhe</field>
  <field tag="DI" occ="1" lang="en-GB">height</field>
  <field tag="WA">173</field>
  <field tag="EE">cm</field>
  <field tag="DI" occ="2" lang="de-DE">Breite</field>
  <field tag="DI" occ="2" lang="en-GB">width</field>
  <field tag="WA">55</field>
  <field tag="EE">cm</field>
</record>'
)
,(
N'<record id="2">
  <field tag="DI" occ="1" lang="de-DE">Höhe</field>
  <field tag="DI" occ="1" lang="en-GB">height</field>
  <field tag="WA">173</field>
  <field tag="EE">cm</field>
  <field tag="DI" occ="2" lang="de-DE">Breite</field>
  <field tag="DI" occ="2" lang="en-GB">width</field>
  <field tag="WA">55</field>
  <field tag="EE">cm</field>
</record>'
);

UPDATE @tbl SET YourXml=YourXml.query
(N'
    <record id="{/record/@id}">
    {
        for $fld in /record/field
        return <field>
        {
            for $attr in $fld/@*
            return
            if(local-name($attr)="lang" and $attr="en-GB") then attribute lang {"en-US"}
            else $attr
        }
        {$fld/text()}
        </field>
    }
    </record>
');

SELECT * FROM @tbl

＆＃13;

我创建了一个简单的JS Bin来说明问题。

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

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

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

Answer 1

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

使用is-multiline div。

上的课程columns

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

1 个答案: