我无法尝试使用布尔玛库在其中包含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>
答案 0 :(得分:1)
布尔马的水平被明确告知不要收缩
.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>
答案 1 :(得分:1)
就我而言,我必须为居中的level-item
元素添加第三个样式条件:
.level-is-shrinkable .level-left,
.level-is-shrinkable .level-item,
.level-is-shrinkable .level-right {
flex-shrink: 1;
}
非常感谢一个网页设计师的回答。