React-Bootstrap 水平表单不起作用

Question

我正在尝试使用 react-bootstrap 创建表单，但无法弄清楚如何使用水平表单布局。下面是我的 signin.js 代码。

import React, {Component} from 'react';
import {reduxForm} from 'redux-form';
import {Form, FormGroup, FormControl, ControlLabel, Col, Button} from 'react-bootstrap';

class Signin extends Component{
    handleFormSubmit({username,password}){
        console.log(username,password);
    }
    render(){
        const {handleSubmit, fields: {username,password}}=this.props;
        return(
            <Form horizontal className="col-sm-6 offset-sm-3" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
                <FormGroup>
                    <Col componentClass={ControlLabel} sm={2}>
                        Username:
                    </Col>
                    <Col sm={10}>
                        <FormControl {...username} type="text" />
                    </Col>
                </FormGroup>
                <FormGroup>
                    <Col componentClass={ControlLabel} sm={2}>
                        Password:
                    </Col>
                    <Col sm={10}>
                        <FormControl {...password} type="password" />
                    </Col>
                </FormGroup>
                <FormGroup>
                    <Col>
                        <Button type="submit">Submit</Button>
                    </Col>
                </FormGroup>
            </Form>
        );
    }
}

export default reduxForm({
    form: 'signin',
    fields: ['username','password']
})(Signin);

这是它在 app.js 中的呈现方式：

import React, {Component} from 'react';
import {Route} from 'react-router-dom';
import Signin from '../auth/signin';

export default class App extends Component{
    render(){
        return(
            <div>
                <Route exact path="/signin" component={Signin} />
            </div>
        );
    }
}

这就是它呈现到页面上的方式 我希望两个标签都与文本字段内联。我已经多次浏览了 react-bootstrap 文档。我已将水平表单的示例代码复制并粘贴到我的代码中，它仍然呈现与上图类似的效果。任何帮助将不胜感激。谢谢！

编辑：

这个问题是由于在我的 html 中链接到 bootstrap 的 v4 引起的，将它链接到 v3 修复了它。

Answer 1

您的实现不起作用的原因是 Bootstrap 使用 Flex。您必须将表单元素排成一行。

<Form horizontal className="col-sm-6 offset-sm-3" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
                <FormGroup>
                    <Form.Row>
<Col componentClass={ControlLabel} sm={2}>
                        Username:
                    </Col>
                    <Col sm={10}>
                        <FormControl {...username} type="text" />
                    </Col>
</Form.Row
                </FormGroup>
                <FormGroup>
<Form.Row>
                    <Col componentClass={ControlLabel} sm={2}>
                        Password:
                    </Col>
                    <Col sm={10}>
                        <FormControl {...password} type="password" />
                    </Col>
</Form.Row>
                </FormGroup>
                <FormGroup>
                    <Col>
                        <Button type="submit">Submit</Button>
                    </Col>
                </FormGroup>
            </Form>