Make ReactStrap/Bootstrap4 Cards In Separate Columns Same Height

问题

I have an example at https://codesandbox.io/s/426277vml9. I am using separate columns because I want them to stack at low resolution.

Obviously, right now, height is a function of content, and so they are unequal. Is there any way (short of imposing a fixed height) to get them to automagically align to the same height?

  <Container fluid className="full-height bg-light">
      <Row className="h-100 justify-content-center full-height align-items-center bg-light">
        <Col xs="10" lg="3" className="p-0">
          <Card>
            <CardBody>
              <CardTitle>LOGIN</CardTitle>
              <CardText>Sign in with your account.</CardText>
              <InputGroup className="mb-3">
                <div className="input-group-prepend">
                  <span className="input-group-text">
                    <i className="icon-user"></i>
                  </span>
                </div>
                <Input type="text" placeholder="Username"/>
              </InputGroup>
              <InputGroup className="mb-4">
                <div className="input-group-prepend">
                  <span className="input-group-text">
                    <i className="icon-lock"></i>
                  </span>
                </div>
                <Input type="password" placeholder="Password"/>
              </InputGroup>
              <Row>
                <Col xs="12" lg="6">
                  <Button color="primary" className="px-4">Login</Button>
                </Col>
                <Col xs="12" lg="6" className="text-right">
                  <Button color="link" className="px-0">Forgot password?</Button>
                </Col>
              </Row>
            </CardBody>
          </Card>
        </Col>
        <Col xs="10" lg="3" className="p-0">
          <Card color="primary">
            <CardBody className="text-white">
              <CardTitle>CREATE ACCOUNT</CardTitle>
              <CardText>If you want to create an account for your company to start using this product, click on the Create button. If your organization already has an account and you'd like to join it, click on the "Join" button.</CardText>
              <Row>
                <Col xs="12" md="6">
                  <Button color="success" className="px-4">Create</Button>
                </Col>
                <Col xs="12" md="6" className="text-right">
                  <Button color="success" className="px-4">Join</Button>
                </Col>
              </Row>
            </CardBody>
          </Card>
        </Col>
      </Row>
    </Container>

回答1:

You have to modify your markup slightly in order to achieve that. Below you will find the sample markup. Here is the breakdown:

Separate the .justify-content-center class from the .align-items-center by applying the latter on the div with .container-fluid and also adding a .d-flex to this outer div.
You can delete .h-100 .full-height .bg-light classes from the .row now.
With this setup the divs with the .col-10 will already be of same height, so the only thing left is to put h-100 on the .cards, to make them fill up the vertical space.

.full-height {
    min-height:100vh;
}

<div id="root">
    <div class="container-fluid d-flex full-height align-items-center bg-light">
        <div class="row justify-content-center">
            <div class="p-0 col-10 col-lg-3">
                <div class="card h-100">
                    <div class="card-body">
                        <h4 class="card-title">LOGIN</h4>
                        <p class="card-text">Sign in with your account.</p>
                        <div class="mb-3 input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="icon-user"></i></span>
                            </div>
                            <input placeholder="Username" class="form-control" type="text">
                        </div>
                        <div class="mb-4 input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="icon-lock"></i></span>
                            </div>
                            <input placeholder="Password" class="form-control" type="password">
                        </div>
                        <div class="row">
                            <div class="col-12 col-lg-6">
                                <button class="px-4 btn btn-primary">Login</button>
                            </div>
                            <div class="text-right col-12 col-lg-6">
                                <button class="px-0 btn btn-link">Forgot password?</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="p-0 col-10 col-lg-3">
                <div class="card h-100 bg-primary">
                    <div class="text-white card-body">
                        <h4 class="card-title">CREATE ACCOUNT</h4>
                        <p class="card-text">If you want to create an account for your company to start using this product, click on the Create button. If your organization already has an account and you'd like to join it, click on the "Join" button.</p>
                        <div class="row">
                            <div class="col-12 col-md-6">
                                <button class="px-4 btn btn-success">Create</button>
                            </div>
                            <div class="text-right col-12 col-md-6">
                                <button class="px-4 btn btn-success">Join</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

回答2:

You can use reactstrap's CardDeck for that.

来源：https://stackoverflow.com/questions/48567158/make-reactstrap-bootstrap4-cards-in-separate-columns-same-height

标签

css

bootstrap-4

reactstrap