React-Bootstrap 1.0.0-beta.6 смещение и Form Col не работает

Question

Я просто устанавливаю response-bootstrap v1.0.0-beta.6, и система Grid не работает.Я скопировал следующий код из их документации, но он не работает.

Я пытаюсь централизовать форму на экране, используя смещения, и я также хочу, чтобы некоторые поля формы были смежными.

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>
    );
  }
}

Вот результат ...

Обратите внимание, что форма не имеет столбцов и форма не централизована.

Я использую "bootstrap": "^4.3.1"

Answer 1

Я только что получил ответ на странице gitHub.Я установил bootstrap, но не импортировал его в свой index.js, как показано здесь