使独立列中的ReactStrap/Bootstrap4卡具有相同的高度 [英] Make ReactStrap/Bootstrap4 Cards In Separate Columns Same Height

问题描述

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

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>

推荐答案

您必须稍加修改标记才能实现此目的.在下面，您将找到示例标记.这是细分:

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

• 通过将 .justify-content-center 类与 .align-items-center 分开，方法是将div与 .container-fluid ，还向该外部div添加 .d-flex .
• 您现在可以从 .row 中删除 .h-100 .full-height .bg-light 类.
• 通过此设置，具有 .col-10 的div的高度将已经相同，因此剩下的唯一事情是将 h-100 放在 .card s，以使其填充垂直空间.

• 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"/>

这篇关于使独立列中的ReactStrap/Bootstrap4卡具有相同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！