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">

标签： cssbulma

Answer 1

试试这个也许可以解决你的问题。这里 flex-direction: column 与 flex-direction: row 相对。这里 is-full 就像块元素一样工作，它总是需要 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;
}