ポジショニングのためのブートストラップクラス

Question

最初のボタンで同じ行に2番目のボタンを配置するために必要なクラス。あなたはブートストラップ4でクラスがコール.d-flexで、フレキシボックスのCSSをブートストラップ4を使用して適用されていると仮定すると、ありませんコードが存在しないので、私は、ブートストラップ4.

<div class="container"> 

      <div class="row justify-content-sm-center"> 

       <div class="col-sm-5 kappa"> 

        <h3>Don't have an account?</h3> 
        <hr> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem quasi facere officiis numquam alias, delectus beatae autem facilis aliquid voluptates aspernatur, eaque suscipit possimus eveniet praesentium explicabo itaque nulla distinctio. 
        </p> 
        <button type="button">sign up</button> 
       </div> 

       <div class="col-sm-5 kappa"> 
        <h3>Have an account?</h3> 
        <hr> 
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipisicing elit! 
        </p> 
        <button type="button" class="">login</button> 
       </div> 

      </div> 
     </div> 

Answer 1

を使用しています。親に.d-flexを適用した後、すべての直接子孫はmarginを使用して簡単に整列できます。ブートストラップ4では、mt-autoとmb-0と呼びます。あなたが持っている

.bigcontainer{ 
 

 
height:300px; 
 
background:grey; 
 
width:40%; 
 
float:left; 
 
margin:10px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<div class="bigcontainer d-flex flex-column"> 
 
    <div>Title</div> 
 
    <div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue.Quisque semper eleifend odio eget feugiat. Curabitur id mi tristique, ultrices lectus quis, gravida tortor..</div> 
 
    <div class="mt-auto mb-0"><button>button</button></div> 
 
</div> 
 

 
<div class="bigcontainer d-flex flex-column"> 
 
    <div>Title</div> 
 
    <div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue. </div> 
 
    <div class="mt-auto mb-0"><button>button</button></div> 
 
</div>

Answer 2

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
<style> 
     .cs-button { 
      position: absolute; 
      bottom: 0; 
      margin-bottom: 20px; 
     } 
     </style> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="height: 200px;"> 
        <div>Title</div> 
        <div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue.Quisque semper eleifend odio eget feugiat. Curabitur id mi tristique, ultrices lectus quis, gravida tortor..</div> 
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cs-button" style="padding:0" > 
        <div class="mt-auto mb-0"><button>button</button></div> 
        </div> 
       </div> 
       <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="height: 200px;"> 
        <div>Title</div> 
        <div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue. </div> 
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cs-button" style="padding:0"> 
        <div class="mt-auto mb-0"><button>button</button></div> 
        </div> 
       </div> 
      </div> 
     </div>