ブートストラップ3異なる列の同じ水平位置にボタンを配置する方法

Question

私は3つの列を配置しようとしています。 - サービスについて& Why_Usは1列にあり、各列には "Read More"オプションが1つあります。私はこれらの3つのボタンが同じ水平レベルになるようにしようとしています。私が列&のボタンの高さを&のCSSで定義している場合、これらのレイアウトはさまざまな画面サイズで歪んでいます。 （コンテンツと重なるボタンなど）。解決にお役立てください。ここで

は私のコードです：

CSS：

<style> 
.intro_col{ 
    height: auto; 
    background-color: #EEEEEE; 
    margin: 30px 1.35%; 
    padding-bottom: 30px; 
    box-shadow:-8px 8px 0px 2px #E0E0E0; 
} 

#intro .btn-info{ 
    position: absolute; 
    bottom: 4%; 
    right: 4%; 
} 

</style> 

HTML

<!-- Container (About & Services Section) --> 
<div id="intro" class="container text-center"> 
    <div class = "row"> 
     <div class="col-sm-4 intro_col" id="about"> 
      <h2>About Us</h2> 
      <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p> 
      <button type="button" class="btn pull-right btn-info">Read More</button> 
     </div> 

     <div class="col-sm-3 intro_col" id="services"> 
      <h2>Services</h2> 

      <ul> 
      <li>SERVICE-1</li> 
      <li>SERVICE-2</li> 
      <li>SERVICE-3</li> 
      <li>SERVICE-4</li> 
      <li>SERVICE-5</li> 
      <li>SERVICE-6</li> 
      <li>SERVICE-7</li> 
      <li>SERVICE-8</li> 
      </ul> 
      <button type="button" class="btn pull-right btn-info">Read More</button> 
     </div> 
     <div class="col-sm-4 intro_col" id="why_us"> 
      <h2>Why Choose Us</h2> 
      <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> 
      <button type="button" class="btn pull-right btn-info">Read More</button> 
     </div> 
     <div class="clearfix"></div> 

</div> 

おかげ

Answer 1

私は、これはあなたが同じ高さの列をしたいと仮定すると、あなたのために適しているだろうと思いますまた：

.intro_col { 
 
    height: auto; 
 
    background-color: #EEEEEE; 
 
    margin: 30px 1.35%; 
 
    padding-bottom: 60px; 
 
    box-shadow: -8px 8px 0px 2px #E0E0E0; 
 
} 
 

 
#intro .btn-info { 
 
    position: absolute; 
 
    bottom: 4%; 
 
    right: 4%; 
 
} 
 

 
.row-eq-height { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<!-- Container (About & Services Section) --> 
 
<div id="intro" class="container text-center"> 
 
    <div class="row row-eq-height"> 
 
    <div class="col-sm-4 intro_col" id="about"> 
 
     <h2>About Us</h2> 
 
     <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked 
 
     up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p> 
 
     <button type="button" class="btn pull-right btn-info">Read More</button> 
 
    </div> 
 

 
    <div class="col-sm-3 intro_col" id="services"> 
 
     <h2>Services</h2> 
 

 
     <ul> 
 
     <li>SERVICE-1</li> 
 
     <li>SERVICE-2</li> 
 
     <li>SERVICE-3</li> 
 
     <li>SERVICE-4</li> 
 
     <li>SERVICE-5</li> 
 
     <li>SERVICE-6</li> 
 
     <li>SERVICE-7</li> 
 
     <li>SERVICE-8</li> 
 
     </ul> 
 
     <button type="button" class="btn pull-right btn-info">Read More</button> 
 
    </div> 
 
    <div class="col-sm-4 intro_col" id="why_us"> 
 
     <h2>Why Choose Us</h2> 
 
     <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line 
 
     of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> 
 
     <button type="button" class="btn pull-right btn-info">Read More</button> 
 
    </div> 
 
    <div class="clearfix"></div> 
 

 
    </div>