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

Posted 2023-03-23

【中文标题】使 ReactStrap/Bootstrap4 卡在不同的列中具有相同的高度

【英文标题】：Make ReactStrap/Bootstrap4 Cards In Separate Columns Same Height

【发布时间】：2018-07-12 00:55:14

【问题描述】：

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

【问题讨论】：

很高兴看到为什么通过评论投反对票...

可能导致这个问题在 SO 上被问得太频繁了。您是否搜索过重复项？最重要的是，您需要在您的问题中而不是您的网站中显示您的标记。链接死了，这对将来的任何人都没有帮助。 minimal reproducible example我很震惊你还不知道。

可能重复：***.com/questions/47840534/…

@Rob 我无法确认作者在链接帖子中的自我回答中发布的解决方案是否提供了解决方案。无论如何，对于 Bootstrap 4 来说，这不是一个可行的解决方案。

@WebDevBooster：我正在使用 Reactstrap，它是作为 React 组件的 Bootstrap4。我已经编辑了问题标题以更好地反映这一点。我很抱歉。

【参考方案1】：

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

将.justify-content-center 类与.align-items-center 分开，方法是在带有.container-fluid 的div 上应用后者，并将.d-flex 添加到这个外部div。 您现在可以从.row 中删除.h-100 .full-height .bg-light 类。 通过此设置，带有.col-10 的 div 将具有相同的高度，所以唯一剩下的就是将h-100 放在.cards 上，以使它们填满垂直空间。

.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】：

你可以使用 reactstrap 的 CardDeck 。