Question

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

显然，现在，身高是内容的函数，所以他们是不平等的。有没有办法（没有施加固定的高度）让它们自动对齐到同一高度？

/path/to/{uid}
  - property1
  - property2

Answer 1

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

将.justify-content-center类与.align-items-center分开，将后者应用于.container-fluid的div，并在此外部div中添加.d-flex。
您可以立即从.h-100 .full-height .bg-light删除.row个班级。
使用此设置，.col-10的div已经具有相同的高度，因此唯一剩下的就是将h-100放在.card上，以使它们填满垂直空间。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以为此使用reactstrap的CardDeck。

在单独的列中使ReactStrap / Bootstrap4卡同样高度

2 个答案: