React-Bootstrap 1.0.0-beta.6偏移量和Form Col不起作用

Question

我只安装了react-bootstrap v1.0.0-beta.6，并且Grid系统无法正常工作。我从他们的文档中复制了以下代码，但无法正常工作。

我正在尝试通过使用偏移量将表单集中在屏幕中，并且我还希望某些表单域彼此相邻。

b''

这是结果...

请注意该表单没有列并且表单没有集中化。

我正在使用class RegistrationPage extends Component { render() { return ( <Container> <Row center> <Col md={{ span: 4, offset: 4}}> <Form> <Form.Row> <Form.Group as={Col} controlId="formGridEmail"> <Form.Label>Email</Form.Label> <Form.Control type="email" placeholder="Enter email" /> </Form.Group> <Form.Group as={Col} controlId="formGridPassword"> <Form.Label>Password</Form.Label> <Form.Control type="password" placeholder="Password" /> </Form.Group> </Form.Row> <Form.Group controlId="formGridAddress1"> <Form.Label>Address</Form.Label> <Form.Control placeholder="1234 Main St" /> </Form.Group> <Form.Group controlId="formGridAddress2"> <Form.Label>Address 2</Form.Label> <Form.Control placeholder="Apartment, studio, or floor" /> </Form.Group> <Form.Row> <Form.Group as={Col} controlId="formGridCity"> <Form.Label>City</Form.Label> <Form.Control /> </Form.Group> <Form.Group as={Col} controlId="formGridState"> <Form.Label>State</Form.Label> <Form.Control as="select"> <option>Choose...</option> <option>...</option> </Form.Control> </Form.Group> <Form.Group as={Col} controlId="formGridZip"> <Form.Label>Zip</Form.Label> <Form.Control /> </Form.Group> </Form.Row> <Form.Group id="formGridCheckbox"> <Form.Check type="checkbox" label="Check me out" /> </Form.Group> <Button variant="primary" type="submit"> Submit </Button> </Form> </Col> </Row> </Container> ); } }

Answer 1

我刚刚在gitHub页面上回答了这个问题。我安装了引导程序，但没有将其导入到index.js中，如here

所示