引导3.2:如何使3列包含另一个div相同高度的文本？
使用引导带3.2，我有一个部分的网站，有三个div (.col-lg-3 box)，将有不同数量的文本在他们。我希望它们都扩展到包含div (.row)的底部。指向我正在使用的CSS文件的链接在这里：https://github.com/ttmjason/GazoomTravel/blob/master/css/bootstrap.css。
我在Stack上看到的关于这个一般问题(容器中相同高度的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>回答 1
Stack Overflow用户
发布于 2014-10-25 01:28:51
有许多方法可以创建等高列。没有一个是过时的，除非您使用的是实际的表。Flexbox适用于现代浏览器。您可以使用jQuery。你可以使用大量的填充底部和负边际底部。您可以在.row上使用display:table，在列上使用display:table-cell (在移除浮点数之后)。
然而，所有的CSS方法只提供如下内容：
参考资料：http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height
这是因为在引导栅格中没有空隙，它是填充的。
但如果你想要像这样的盒子呢？
你不能这样做，因为两者之间没有差距。您可以使用边框和:前/:后，但如果您有一个背景图像作为您的页面的背景呢？
在过去的几年中，我一直使用jQuery方法。这是我使用的最新脚本，非常流畅：https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows
下面是如何使用它(一旦在jQuery之后加载)：
$(window).load(function() {
$('.the-class-I-want-to-be-equal').responsiveEqualHeightGrid();
});这可以是列的一个子类，它允许您在这个答案中生成第二个数字。
这里有一个例子，里面有一些假的内容和平底按钮。你会注意到等高是有反应的，它们是每一行视觉上的，所以它不是最高的，它是最近的兄弟姐妹中最高的。所以，本质上，它给出了预期的结果：
演示： http://jsbin.com/tunohe/1/
https://stackoverflow.com/questions/26557910
复制相似问题
腾讯云开发者
