Question

我正在尝试创建引导程序控制的表单。我正在使用 react-bootstrap <Form>组件。我只是将代码从 react bootstrap 网站复制并粘贴到我的代码编辑器中。我得到了意外的结果。

我的代码 ：

import React from 'react';
// bootstrap components
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';

class Test extends React.Component{
    render(){
        return (
            <Form>
                <Form.Group controlId="formBasicEmail">
                    <Form.Label>Email address</Form.Label>
                    <Form.Control type="email" placeholder="Enter email" />
                    <Form.Text className="text-muted">
                        We'll never share your email with anyone else.
                    </Form.Text>
                </Form.Group>

                <Form.Group controlId="formBasicPassword">
                    <Form.Label>Password</Form.Label>
                    <Form.Control type="password" placeholder="Password" />
                </Form.Group>
                <Form.Group controlId="formBasicCheckbox">
                    <Form.Check type="checkbox" label="Check me out" />
                </Form.Group>
                <Button variant="primary" type="submit">
                    Submit
                </Button>
            </Form>
        )
    }
}

export default Test;

结果：

您可以在左侧看到按钮的呈现方式。复选框和静音文本也在左侧呈现。已应用 border-radious ，这是不期望的。

注意：我没有使用任何外部样式。我正在渲染单个组件。

Answer 1

是否已安装所有依赖项？好像没有添加CSS。

npm install bootstrap react-bootstrap

您还需要在src / index.js或src / app.js中导入CSS。

import 'bootstrap/dist/css/bootstrap.min.css'

React Bootstrap表单未按预期呈现

1 个答案: