У меня возникли проблемы с попыткой создать адаптивную сетку из 3 блоков с некоторым выровненным содержимым внутри с использованием библиотеки Bulma. Я хотел бы, чтобы он работал, сохраняя уровень внутри коробки, если это возможно.
Любая помощь будет оценена по достоинству.
Это результат, который я ожидаю:
Но при уменьшении ширины ломается:
Это код, который я использую:
<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>