Bootstrap 3 col 等高与动态和不均匀的内容

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，col 的高度将相等，但 book 按钮不会粘在底部，position:absolute; 也不适用于底部按钮，

如何使这些列的高度相等，内容不均匀，book 按钮粘在列的底部

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