【问题标题】:How to stop overflow of elements in a multi column in React?如何阻止 React 中多列中的元素溢出?
【发布时间】:2020-08-22 07:34:15
【问题描述】:

我创建了一个包含 2 列的表单,如下所示:

学生姓名是必填字段。因此,当需要一个空输入时,它会抛出一个标记为 Required 的红色文本。问题是,当这种情况发生时,标记为Student name: 的字段名称会出现在另一列中,如下所示。

这是我的 css。

.formLayout{
  column-count: 2;
  column-gap: 5%;
}

有没有办法防止这种情况只使用 .css 或任何变通方法来实现?

【问题讨论】:

    标签: css reactjs multiple-columns


    【解决方案1】:

    你能设置行的最小高度吗?

    如果有机会输出错误信息,应该有更多空间。

    类似:

    display: grid;
    grid-template: repeat(2, 100px) / 50% 50%;
    column-gap: 5%;
    

    【讨论】:

    • 天哪。你刚刚拯救了我的一天。做了一些小的修改,但已经完成了。谢谢
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-01-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-11-16
    • 2017-06-14
    相关资源
    最近更新 更多