使 ReactStrap/Bootstrap4 卡片在不同的列中具有相同的高度

Question

我在 https://codesandbox.io/s/426277vml9 有一个例子。我正在使用单独的列，因为我希望它们以低分辨率堆叠。

显然，现在，高度是内容的函数，因此它们是不相等的。有什么办法（除了施加固定高度之外）让它们自动对齐到相同的高度吗？

  <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>

Answer 1

您必须稍微修改您的标记才能实现这一点。您将在下面找到示例标记。这是细分：

将 .justify-content-center class 与 .align-items-center 分开，方法是将后者应用于 div 和 .container-fluid 并添加 .d-flex到这个外部 div.
您现在可以从 .row 中删除 .h-100 .full-height .bg-light class。
使用此设置，div 与 .col-10 的高度已经相同，因此唯一剩下的就是将 h-100 放在 .card 上, 使它们填满垂直 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"/>

Answer 2

你可以使用 reactstrap 的 CardDeck。

使 ReactStrap/Bootstrap4 卡片在不同的列中具有相同的高度

Make ReactStrap/Bootstrap4 Cards In Separate Columns Same Height

css

bootstrap-4

reactstrap