尽管没有设置 is-multiline,为什么我的 bulma 列会换行?
Why are my bulma columns wrapping, despite not having is-multiline set?
我正在使用 Bulma 进行列管理,它有一个 is-multiline
class 可用于允许列换行。但是,我没有使用这个 class,但我的专栏仍在换行。
预期行为:
两列始终并排,在同一行
实际行为:
在某些视口宽度下,第二列位于第一列下方而不是旁边。
问题
如果您熟悉 Bulma,能否介意看一下这个简单的示例,如果我做的事情明显有误,请告诉我?非常感谢!
HTML
<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>
CSS
.body {
width: 600px;
background-color: #000;
margin: 0 auto 0;
}
.row-name {
background-color: #ffff0088;
width: 50px;
}
.row-cells {
background-color: #ff000088;
}
一个 JSFiddle:https://jsfiddle.net/8ggyagxp/10/
事实证明,如果 Bulma 检测到您的视口是 移动设备 大小,它将堆叠列,除非列上存在 is-mobile
class。有关详细信息,请参阅 here。
我正在使用 Bulma 进行列管理,它有一个 is-multiline
class 可用于允许列换行。但是,我没有使用这个 class,但我的专栏仍在换行。
预期行为:
两列始终并排,在同一行
实际行为:
在某些视口宽度下,第二列位于第一列下方而不是旁边。
问题
如果您熟悉 Bulma,能否介意看一下这个简单的示例,如果我做的事情明显有误,请告诉我?非常感谢!
HTML
<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>
CSS
.body {
width: 600px;
background-color: #000;
margin: 0 auto 0;
}
.row-name {
background-color: #ffff0088;
width: 50px;
}
.row-cells {
background-color: #ff000088;
}
一个 JSFiddle:https://jsfiddle.net/8ggyagxp/10/
事实证明,如果 Bulma 检测到您的视口是 移动设备 大小,它将堆叠列,除非列上存在 is-mobile
class。有关详细信息,请参阅 here。