我正在尝试创建一个引导控制的表单。我正在使用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;
结果：
您可以看到按钮在左侧是如何呈现的。复选框和静音文本也在左侧呈现。有一个边框-radious已应用，这是意料之外的。
注意：我没有使用任何外部样式。我正在渲染这个单个组件。