框内的水泡级别溢出
框内的水泡级别溢出
提问于 2019-05-12 08:14:10
我在使用Bulma库的时候遇到了麻烦，想要有一个由3个盒子组成的响应式网格，里面有一些对齐的内容。我想让它仍然工作，如果可能的话，保持一个盒子内的水平。
任何帮助都将不胜感激。
这是我所期望的结果：
但是当减小宽度时，它会断开：
这是我使用的代码：
<div className="columns sub">
{this.props.options.map(option => (
<div className="column is-one-third" key={option.id}>
<div
name={option.id}
className={
`box ` +
(this.props.optionToBeChosen === option.id
? "box-is-active"
: "")
}
onClick={() => this.props.onClick(option.id)}
>
<div className="level is-mobile">
<div className="level-item level-left">
<div>
<p className="box-text-title">{option.title}</p>
<p className="box-text-small">{option.description}</p>
<p className="box-text-small">{option.description2}</p>
</div>
</div>
<div className="level-item level-right has-text-right">
<div>
<p className="box-text-demo">{option.cta}</p>
</div>
</div>
</div>
</div>
</div>
))}
</div>回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-13 23:27:48
Bulma级别被明确告知不要缩小
.level-left, .level-right {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
}您必须覆盖它，以使级别不会脱离.box元素。
与其覆盖所有级别的项目，我建议您向那些您希望能够缩小的级别添加一个自定义类。
就像这样
<div class="level is-mobile level-is-shrinkable">
Level items here...
</div>
<style>
.level-is-shrinkable .level-left,
.level-is-shrinkable .level-right {
flex-shrink: 1;
}
</style>Stack Overflow用户
发布于 2020-11-12 03:43:20
在我的例子中，我必须为居中的level-item元素添加第三个样式条件：
.level-is-shrinkable .level-left,
.level-is-shrinkable .level-item,
.level-is-shrinkable .level-right {
flex-shrink: 1;
}非常感谢just-a-web设计师的回答。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56095233
复制相关文章
相似问题
腾讯云开发者
