我正在尝试使 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>£ 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>£ 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>£ 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>£ 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 按钮保持在列底部的等高
最佳答案
我使用 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 :FIDDLE
关于jquery - Bootstrap 3 col等高，内容动态且不均匀，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32703048/