【发布时间】：2020-03-06 12:11:53
【问题描述】：
我有以下使用引导程序样式的应用程序
两列具有相同的高度，但是，我希望两列的内容对齐，以便两个部分中的按钮处于相同高度，这意味着列中的内容必须占据 div 元素中的所有空间.
我的组件如下所示：
<div id="section" class="container-fluid">
<div class="row" style="height: 100%">
<div class="col-6 text-center d-flex flex-column justify-content-center align-items-center">
<div class="card text-center" style="border: none; height: 100%">
<h1>
Title ONE
</h1>
<div class="card-body">
<h5 class="card-title">Id mei error ignota mentitum.</h5>
<h5 class="card-title">Lorem ipsum dolor sit amet, vero invenire cum et, semper</h5>
<h5 class="card-title">mea sumo doctus scripta cu, te qui omnes numquam mentitum.</h5>
<a href="#" class="btn btn-outline-info" style="border-radius:20px;">BUTTON ONE</a>
</div>
</div>
</div>
<div class="col-6 d-flex flex-column justify-content-center align-items-center">
<div class="card text-center" style="border: none; height: 100%">
<h1>
Title TWO
</h1>
<div class="card-body">
<h5 class="card-title">His te nibh vulputate interpretaris, eros error nullam vix ut. Nullam discere commune ei ius, zril vocent ea sed. Per cu augue melius fabulas.</h5>
<h5 class="card-title">Eu nec hendrerit dissentias, eos aperiam prodesset no.</h5>
<h5 class="card-title">Mollis tibique vis te, has eu veri euismod repudiare.</h5>
<a href="#" class="btn btn-outline-info" style="border-radius:20px;">BUTTON TWO</a>
</div>
</div>
</div>
</div>
</div>
CSS
.card-title {
padding: 10px;
font-weight: lighter;
}
#section {
padding: 20px;
}
【问题讨论】：
-
您需要在此处发布minimal reproducible example，在您的问题中，而不是指向您的网站或任何第三方网站的链接。
-
确定，马上修复
标签： html css twitter-bootstrap