css - 如何使用 bulma 创建两行

Question

我正在使用 bulma，我是 bulma 的新手。

我尝试创建两行，但内容并排放置，并没有像预期的那样在另一行之上。

如何使用 bulma 创建两行？

我尝试使用 class="row"

下面是我的代码:

  <div class="row">
    <h1 class="title is-size-1">
        About
    </h1>
  </div>

  <div class="row">
    <span class="subtitle is-size-4">
      long text.
    </span>
  </div>


</div>

自己回答:我确实使用:<article class="tile is-child notification is-white">

Answer 1

试试这个也许能解决你的问题。这里的 flex-direction: column 与 flex-direction: row 相对。这里的 is-full 就像 block 元素一样工作，它将始终采用 width:100%。

   <div class='rows'>
      <div class='row is-full'> Rows </div>
      <div class='row is-full'> Row one </div>
    </div>

您可以通过这种方式修复，但我不确定这是您要找的。

.rows{
    display: flex;
    flex-direction: column;
}