使用Bootstrap 3.2,我有一个网站的一部分有三个div(.col-lg-3框),其中包含不同数量的文本.我希望他们都延伸到包含div(.row)的底部.我正在使用的CSS文件的链接在这里：
https://github.com/ttmjason/GazoomTravel/blob/master/css/bootstrap.css.
我在Stack Exchange上看到的这个一般性问题(容器中相同的高度div)的答案要么不使用Bootstrap,要么具有过时的语法.如果你能把我链接到一个完全反映我的SxE问题,我很乐意接受这些问题来换取答案.
<div class="container-fluid join">
<h2 class="text-center white-heading" id="join-ita"><strong>Join ITA</strong></h2>
<!-- <hr class="line-black"> -->
<div class="row">
<div class="col-lg-3 Box">
<div>
<h3 class="text-center blue-heading">Newcomers Begin Here</h3>
</div>
<p>You will immediately earn 75% of paid commission,payable to you within 2 weeks of receipt. Upon registering,you immediately receive your own <span class="emphasis-blue">GaZoom</span> personalized website,with product and software training as well as mentoring. You will have at your fingertips all the tools necessary to immediately begin your business in the travel industry.</p>
<button type="button" class="center-block btn btn-success btn-lg">JOIN NOW</button>
</div>
<div class="col-lg-3 Box">
<div>
<h3 class="text-center blue-heading">Experienced Part-Time Agents</h3>
</div>
<p>Immediately earn 80% of paid commissions paid within 2 weeks of receipt. Enjoy your business at your pace with the <span class="emphasis-blue">GaZoom</span> family of products and services. Upon registering you will immediately receive your personalized website with our diverse and unique travel opportunities for your clients at your fingertips. A 24 hour assist program is available for you and your clients. You'll be eligible to participate in our corporate and leisure lead generation program. No monthly minimum requirements.</p>
<button type="button" class="center-block btn btn-warning btn-lg">JOIN NOW</button>
</div>
<div class="col-lg-3 Box">
<div>
<h3 class="text-center blue-heading">Experienced Full-Time Agents</h3>
</div>
<p>You're eligible to receive one of the highest paid commission levels in the industry: 85%,which is payable within 2 weeks of receipt when you maintain monthly bookings. Bring your clients and enjoy one of the industry's most dynamic and unique inventory and booking sites. Be confident that you and your book of business is protected and can be serviced with our 24 hour assist program. We can assist in growing your business by offering you a lead generation program for corporate travelers as well as leisure travelers.</p>
<button type="button" class="center-block btn btn-red btn-lg">JOIN NOW</button>
</div>
</div>
</div>
解决方法
有许多方法可以创建相等高度的列.没有,除非你使用实际的表,否则已过时. FlexBox适用于现代浏览器.你可以使用jQuery.您可以使用非常大量的填充底部和负边距底部.您可以在.row上使用display：table并在列上显示：table-cell(删除浮动后).
但是,所有的CSS方法只能给你这样的东西：
参考：http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height
这是因为在Bootstrap网格中没有边缘作为装订线,它是填充.
但是,如果你想要这样的盒子怎么办？
你不能因为之间没有余地.你可以使用border和：before /：after,但如果你有一个背景图片作为你的页面背景怎么办？
在过去的几年里,我使用了jQuery方法.这是我正在使用的最新脚本,它非常流畅：https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows
以下是如何使用它(一旦它在jQuery之后加载)：
$(window).load(function() {
$('.the-class-I-want-to-be-equal').responsiveEqualHeightGrid();
});
这可以是列的子类,这使您可以在此答案中创建第二个数字.
这是一个假内容和刷新底部按钮的示例.您会注意到平等高度是响应性的,并且它们是每个视觉行,所以它不是最高的,它是最近的兄弟姐妹中最高的.所以,基本上,它给你预期的结果：
