盒子内的布尔玛水平溢出

Question

我在尝试使用 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>

Answer 1

布尔玛等级被明确告知不要缩小

.level-left, .level-right {
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
}

您必须覆盖它才能使关卡不超出 .box 元素。

与其覆盖所有关卡项目，我建议您向您希望能够缩小的关卡添加自定义 class。

类似

<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>

Answer 2

在我的例子中，我必须为居中的 level-item 元素添加第三个样式条件：

.level-is-shrinkable .level-left,
.level-is-shrinkable .level-item,
.level-is-shrinkable .level-right {
  flex-shrink: 1;
}

非常感谢 just-a-web-designer 的回答。

盒子内的布尔玛水平溢出

bulma level inside box overflowing

html

css

bulma