css - 如何阻止 React 中多列中的元素溢出？

Question

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

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

这是我的CSS。

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

有没有办法防止仅使用 .css 或任何解决方法来实现这一点？

标签： cssreactjsmultiple-columns

Answer 1

你能把行的最小高度吗？

如果有机会得到错误消息，应该有更多的空间。

就像是：

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