Question

我正在使用semantic-ui-react节点pacakage开发前端项目。我是新手使用它，我有问题横向集中表单。以下是我渲染表格的方式。

render(){
  const accessCodeLb='Access Code'
  const passwordLb='Password'
  const {accessCodeError,passwordError}=this.state
  return(
  <div>
    <Header as='h2' icon textAlign='center'>
      <Icon name='write' circular/>
      <Header.Content>
        {signUpLb}
      </Header.Content>
    </Header>
    <Grid stackable page columns={16}>
      <Grid.Column width={2}></Grid.Column>
      <Grid.Column width={12}>
        <Form size='small' key='small'>
          <Form.Group>
            <Form.Field width={4} control={Input} name='accessCode' error={accessCodeError}
            placeholder={accessCodeLb} onChange={this.onChange}/>
          </Form.Group>
          <Form.Group>
            <Form.Field width={4} control={Input} name='password' error={passwordError}
             type='password' placeholder={passwordLb} onChange={this.onChange}/>
        </Form.Group>
        <Form.Group>
          <Button primary type='submit' onClick={this.onSubmit}>Login</Button>
        </Form.Group>
      </Form>
     </Grid.Column>
     <Grid.Column width={2}></Grid.Column>
   </Grid>
 </div>
  )
}

Answer 1

注意：目前Semantic UI React尚未与最新的2.3版语义UI样式兼容。有关详细信息，请参阅＃2250。

这里是链接：https://github.com/Semantic-Org/Semantic-UI-React/issues/2550

以下解决了以模态显示为中心的问题。

.ui.dimmer {
  display: flex !important;
}

.ui.modal {
  margin-top: 0;
}

Answer 2

我终于如下所示：

render(){
  const accessCodeLb='Access Code'
  const passwordLb='Password'
  const {accessCodeError,passwordError}=this.state
  return(
    <div>
      <Header as='h2' icon textAlign='center'>
         <Icon name='write' circular/>
         <Header.Content>
            {signUpLb}
         </Header.Content>
     </Header>
     <Grid columns={16}>
        <Grid.Column width={6}></Grid.Column>
        <Grid.Column width={4}>
          <Form size='small' key='small'>
            <Form.Group>
                <Form.Field width={16} control={Input} name='accessCode' error={accessCodeError} placeholder={accessCodeLb} onChange={this.onChange}/>
            </Form.Group>
            <Form.Group>
                <Form.Field width={16} control={Input} name='password' error={passwordError} type='password' placeholder={passwordLb} onChange={this.onChange}/>
            </Form.Group>
            <Form.Group>
               <Form.Field as={Button} width={8}/>
               <Form.Field as={Button} width={8}primary type='submit' onClick={this.onSubmit}>Login</Form.Field>
            </Form.Group>
          </Form>
       </Grid.Column>
       <Grid.Column width={6}></Grid.Column>
    </Grid>
   </div>
   )
  }

如何横向集中语义 - 反应形式

2 个答案: