为什么我的 bulma 列会换行,尽管没有设置 is-multiline ?

Chr*_*oba 3 css bulma

我使用 Bulma 进行列管理,它有一个is-multiline可用于允许列换行的类。但是,我没有使用此类,但我的列仍在换行。

预期行为:

两列始终并排位于同一行

实际行为:

在某些视口宽度下,第二列位于第一列下方而不是旁边。

问题

如果您熟悉 Bulma,您介意看一下这个简单的示例,并让我知道我是否做了明显错误的事情吗?非常感谢!

超文本标记语言

<div class="body">
  <div class="columns">
    <div class="column row-name is-narrow">
      Row 1
    </div>
    <div class="column row-cells">
      Some data
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS

.body {
  width: 600px;
  background-color: #000;
  margin: 0 auto 0;
}
.row-name {
  background-color: #ffff0088;
  width: 50px;
}
.row-cells {
  background-color: #ff000088;
}
Run Code Online (Sandbox Code Playgroud)

JSFiddle: https: //jsfiddle.net/8ggyagxp/10/

Chr*_*oba 6

事实证明,如果 Bulma 检测到您的视口是移动设备大小的,它将堆叠列,除非is-mobile列上存在该类。浏览此处获取更多信息。