我正在使用 Bootstrap 。需要放置两张行高相等的卡片。每张卡片都放在 col-xs-6 中。卡片包含文本和按钮。当我使用 col-height col-xs-6 card
时,两张卡连接在一起。可以请帮我解决这个问题。
<div class="row">
<div class="row-height">
<div class="col-height col-middle col-xs-6 card">
<div class="row">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Login</h3>
</div>
<div class="col-xs-12 text-center">
<a href="javascript:void(0);" class="btn big-btn no-border red-background unstyle-anchor" style="padding: 13px 50px;">Login!</a>
</div>
</div>
</div>
<div class="col-height col-middle col-xs-6 card">
<div class="row">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Sign UP</h3>
</div>
<div class="col-xs-12 text-center">
<a href="javascript:void(0);" class="btn big-btn no-border red-background unstyle-anchor" style="padding: 13px 50px;">Sign Up!</a>
</div>
</div>
</div>
</div>
</div>
最佳答案
这是你想要的吗?
.row
应该被包装到 .container
.card {
border: 1px solid black;
margin: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row-height">
<div class="row">
<div class="col-height col-middle col-xs-5 pull-left card">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Login</h3>
</div>
<div class="col-xs-12 text-center">
<a href="javascript:void(0);" class="btn big-btn no-border red-background unstyle-anchor" style="padding: 13px 50px;">Login!</a>
</div>
</div>
<div class="col-height col-middle col-xs-5 pull-right card">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Sign UP</h3>
</div>
<div class="col-xs-12 text-center">
<a href="javascript:void(0);" class="btn big-btn no-border red-background unstyle-anchor" style="padding: 13px 50px;">Sign Up!</a>
</div>
</div>
</div>
</div>
</div>
关于html - 如何使用 Bootstrap 以相同的高度水平显示两张卡片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39199247/