ブートストラップを使用して、同じ高さで2枚のカードを水平に表示する方法

Question

Imブートストラップを使用しています。等しい行高さのカードを2枚置く必要があります。各カードは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> 

Answer 1

これでいいですか？あなたのコードを投稿することができ

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