Question

嗨，我正在用表单编写页面，我正在使用Reactstrap。表单可以正常工作，但没有响应https://reactstrap.github.io/components/form/。我不知道我在哪里错了。

       <Col lg="6" className="no-padding full-page contact-us">
            <h1 className="h1-main">Objednejte se</h1>
            <hr className="hr-underline"/>

            <Container>
                <Form onSubmit={this.formSubmit} className="form-horizontal">
                    <Row>
                        <Col lg="6">
                            <FormGroup>
                                <Label for="firstName" className="mr-sm-2">Jméno</Label>
                                <Input required onChange={this.handleChange} value={this.state.firstName}
                                       type="text"
                                       name="firstName" id="firstName" placeholder="Jan"/>
                            </FormGroup>
                        </Col>
                        <Col lg="6">
                            <FormGroup>
                                <Label for="lastName" className="mr-sm-2">Příjmení</Label>
                                <Input required onChange={this.handleChange} value={this.state.lastName} type="text"
                                       name="lastName" id="lastName" placeholder="Novák"/>
                            </FormGroup>
                        </Col>
                    </Row>
                    <Row>
                        <Col lg="6">
                            <FormGroup>
                                <Label for="email">Email</Label>
                                <Input required onChange={this.handleChange} value={this.state.email} type="email"
                                       name="email" id="email" placeholder="jan.novak@gmail.com"/>
                            </FormGroup>
                        </Col>
                        <Col lg="6">
                            <FormGroup>
                                <Label for="birthdate">Datum narození</Label>
                                <Input required onChange={this.handleChange} type="date"
                                       name="birhtdate" id="birhtdate" placeholder="date placeholder"/>
                            </FormGroup>
                        </Col>
                    </Row>
                    <FormGroup>
                        <Label for="message">Zpráva</Label>
                        <Input required onChange={this.handleChange} value={this.state.message} type="textarea"
                               name="message" id="message" placeholder="Napište nám důvod Vaší objednávky."/>
                    </FormGroup>
                    <FormGroup>
                        <div>
                            <CustomInput required type="checkbox" id="agreeCheckbox"
                                         label="Souhlasím se zpracováním osobních údajů."/>
                        </div>
                    </FormGroup>
                    <Button color="primary">Odeslat</Button>
                </Form>
            </Container>
        </Col>

在正常网站上，此表格确实不错，但在电话上尺寸太小。但是我不确定为什么。我用Reactstrap文档写的。

谢谢您的帮助：）

解决：问题是我忘记添加此<meta name="viewport" content="width=device-width, initial-scale=1">：/

Answer 1

问题可能来自您在显示屏上的lg =“ 6”。

您无需向表单解释如何在较小的屏幕上做出反应。

我认为您可以在Bootstrap的网格系统中找到解决方案 https://getbootstrap.com/docs/4.1/layout/grid/

例如，尝试添加xs =“ 12”。

希望答案能对您有所帮助。

让我知道结果。

Answer 2

好的，我明白了。除引导程序外，您的表单还有其他样式吗？或者也许在容器上？还是身体？同时观看此页面，它可以帮助您删除引导程序中的一些填充和边距 https://getbootstrap.com/docs/4.1/utilities/spacing/

Reactstrap形式没有响应

2 个答案: