semantic-ui-react如何在网格中使用表单组
semantic-ui-react如何在网格中使用表单组
提问于 2019-03-22 04:48:35
我正在做一个使用semantic-ui-react的项目。该页面有很多输入。我想把整个页面分成3栏。下面是我的实现。
render() {
return (
<Form>
<Grid columns={3} divided>
<Grid.Row>
<Grid.Column stretched>
<Segment>
<Form.Group widths="equal">
<Field name="title" component={renderFieldInput} label="Enter Title"/>
<Field name="test" component={renderFieldInput} label="Enter Title"/>
</Form.Group>
</Segment>
</Grid.Column>
<Grid.Column stretched>
<Segment>
test2
</Segment>
</Grid.Column>
<Grid.Column stretched>
<Segment>
test3
</Segment>
</Grid.Column>
</Grid.Row>
</Grid>
</Form>
);}
布局将变为
段不能容纳for组。任何帮助都是非常感谢的。谢谢。
回答 1
Stack Overflow用户
发布于 2019-03-22 05:01:44
我认为Grid.Column需要存在于Grid.Row和Grid组件中，如下所示：
<Grid columns={3} divided>
<Grid.Row>
<Grid.Column>
<Segment>
Test1
</Segment>
</Grid.Column>
<Grid.Column>
<Segment>
Test2
</Segment>
</Grid.Column>
<Grid.Column>
<Segment>
Test3
</Segment>
</Grid.Column>
</Grid.Row>
</Grid>类似于Twitter bootstrap网格。
请参阅此处的示例：https://react.semantic-ui.com/collections/grid/#types-divided-number
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55289015
复制相关文章
相似问题