引導3山坳相等的高度動態和不均衡的內容

Question

我試圖讓col-*-3相等的高度，其中內col's的內容是動態的和不平衡的。

CSS

.quotebox { 
    border-radius: 10px; 
    border: 1px solid #5B5B5B; 
} 
.comp-logo { 
    width: 90%; 
    padding: 0px 30px 10px 30px; 
} 
.choices h4 { 
    margin-top: 0px; 
    margin-bottom: 5px; 
    text-align: center; 
    background-color: #5B5B5B; 
    border-radius: 6px 6px 0px 0px; 
    padding: 10px 0px 10px 0px; 
    color: #fff; 
} 
.btn-booking { 
    width: 100%; 
    border-radius: 0px 0px 6px 6px; 
} 
.order-btn { 
    /* position:absolute; */ 
} 

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 

<div class="container"> 
    <div class="row" id="equalHeight"> 
     <div class="col-sm-3 choices"> 
      <div class="quotebox"> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <h4>Heading Title</h4> 
         <img src="https://d13yacurqjgara.cloudfront.net/users/110328/screenshots/1666562/flat_icons_1x.png" alt="logo" class="comp-logo" /> 
         <p>uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content unev</p> 
         <div class="more-info text-center"> <a class="btn btn-primary">More Information</a> 
         </div> 
         <div class="row"> 
          <div class="col-sm-6"> 
            <h5>Todays Price</h5> 
          </div> 
          <div class="col-sm-6"> 
            <h5>&pound; 100</h5> 
          </div> 
         </div> 
         <div class="order-btn text-center"> 
          <form action="#" method="post"> 
           <input type="submit" value="Book Book Book" class="btn btn-success btn-lg btn-booking" /> 
          </form> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-3 choices"> 
      <div class="quotebox"> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <h4>Heading Title</h4> 
         <img src="http://cdn.freebiesbug.com/wp-content/uploads/2013/09/flat-icons.jpg" alt="logo" class="comp-logo" /> 
         <p>uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven contentuneven content uneven content unevuneven content uneven content unevuneven content uneven content unev</p> 
         <div class="more-info text-center"> <a class="btn btn-primary">More Information</a> 
         </div> 
         <div class="row"> 
          <div class="col-sm-6"> 
            <h5>Todays Price</h5> 
          </div> 
          <div class="col-sm-6"> 
            <h5>&pound; 100</h5> 
          </div> 
         </div> 
         <div class="order-btn text-center"> 
          <form action="#" method="post"> 
           <input type="submit" value="Book Book Book" class="btn btn-success btn-lg btn-booking" /> 
          </form> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-3 choices"> 
      <div class="quotebox"> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <h4>Heading Title</h4> 
         <img src="http://thumbs.dreamstime.com/x/business-flat-icons-set-web-mobile-design-application-35047525.jpg" alt="logo" class="comp-logo" /> 
         <p>uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven contentuneven content uneven content unev</p> 
         <div class="more-info text-center"> <a class="btn btn-primary">More Information</a> 
         </div> 
         <div class="row"> 
          <div class="col-sm-6"> 
            <h5>Todays Price</h5> 
          </div> 
          <div class="col-sm-6"> 
            <h5>&pound; 100</h5> 
          </div> 
         </div> 
         <div class="order-btn text-center"> 
          <form action="#" method="post"> 
           <input type="submit" value="Book Book Book" class="btn btn-success btn-lg btn-booking" /> 
          </form> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-3 choices"> 
      <div class="quotebox"> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <h4>Heading Title</h4> 
         <img src="http://flatdsgn.com/wp-content/uploads/2013/09/Free-Retina-Flat-Icons2.jpg" alt="logo" class="comp-logo" /> 
         <p>uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content</p> 
         <div class="more-info text-center"> <a class="btn btn-primary">More Information</a> 
         </div> 
         <div class="row"> 
          <div class="col-sm-6"> 
            <h5>Todays Price</h5> 
          </div> 
          <div class="col-sm-6"> 
            <h5>&pound; 100</h5> 
          </div> 
         </div> 
         <div class="order-btn text-center"> 
          <form action="#" method="post"> 
           <input type="submit" value="Book Book Book" class="btn btn-success btn-lg btn-booking" /> 
          </form> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

我已經試過

• display:table，使它不響應
• 不想使用display:flex由於缺乏移動瀏覽器支持

• 嘗試以下jQuery腳本

  $(document).ready(function() { 
      $("#equalHeight").each(function() { 
      var highestBox = 0; 
      $(".quotebox", this).each(function() { 
       if ($(this).height() > highestBox) highestBox = $(this).height(); 
      }); 
      $(".quotebox", this).height(highestBox); 
      }); 
  }); 
  

與jQuery，山坳的高度等於但book按鈕將不會在底部堅持，position:absolute;也沒有與底部按鈕的工作，

如何使這些col的高度不均勻且book按鈕位於col的底部

Fiddle without jQuery

Fiddle with jQuery

Answer 1

使用jQuery我設置相對於所述的div按鈕的高度。但是，你需要一個媒體查詢，以保持它的響應：

if ($(window).width() >= 768){ 
     $(".btn-booking", this).each(function() { 
      id = $(this).data('id'); 
      pos = highestBox - $("[data-id='" + id + "']").position().top; 
      pos -= 2 * $(this).height(); 
      $("[data-id='" + id + "']").css("margin-top", pos);    
     }); 
    } 

這裏有一個小提琴：FIDDLE