Mam następujący kod karty do karty, którą chcę wyśrodkować pionowo:

import React from 'react';

import {
  Card,
  CardHeader,
  CardBody,
  CardTitle,
  Row,
  Col,
  Container
} from "reactstrap";

const Login = () => {
    return(
        <Container className="d-flex h-100">
            <Row className="justify-content-center align-self-center">
                <Col>
                    <Card>
                        <CardHeader>
                            <CardTitle>
                                Login
                            </CardTitle>
                        </CardHeader>
                        <CardBody>
                            do something
                        </CardBody>
                    </Card>
                </Col>
            </Row>
        </Container>
    );
}; 

export default Login;

Jednak wynik jest następujący:

enter image description here

Każdy ma jakieś pomysły, dlaczego nie działa?

1
Kex 16 październik 2020, 08:15

1 odpowiedź

Najlepsza odpowiedź

Myślę, co chcesz, to vh-100 dla rzutowych jednostek. Podejrzewam, że pudełko zawierające Container nie jest ustawione na podjęcie rzutni

<Container className="d-flex vh-100">
  <Row className="m-auto align-self-center">
    <Col>
      <Card>
        <CardHeader>
          <CardTitle>Login</CardTitle>
        </CardHeader>
        <CardBody>do something</CardBody>
      </Card>
    </Col>
  </Row>
</Container>
3
95faf8e76605e973 16 październik 2020, 05:49