html - Bootstrap 3.2 : How to make 3 columns containing text in another div same height?

Question

使用 Bootstrap 3.2，我有一个网站部分包含三个 div (.col-lg-3 box)，其中包含不同数量的文本。我希望它们都延伸到包含 div (.row) 的底部。我正在使用的 CSS 文件的链接在这里:https://github.com/ttmjason/GazoomTravel/blob/master/css/bootstrap.css .

我在 Stack Exchange 上看到的这个一般问题(容器中相同高度的 div)的答案要么不使用 Bootstrap，要么语法过时。如果您可以将我链接到一个完美反射(reflect)我的 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>

Answer 1

创建等高列的方法有很多种。除非您使用的是实际表格，否则都已过时。 Flexbox 适用于现代浏览器。您可以使用 jQuery。您可以使用非常大量的 padding-bottom 和 negative margin bottom。您可以在 .row 上使用 display:table 并在列上使用 display:table-cell(在删除 float 之后)。

然而所有的 CSS 方法只会给你这样的东西:

引用:http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height

这是因为在 Bootstrap 网格中没有作为装订线的边距，它是填充。

但是如果你想要一些像这样的盒子怎么办？

你不能，因为两者之间没有余地。您可以使用边框和 :before/:after，但是如果您将背景图片用作页面背景怎么办？

在过去的几年里，我一直使用 jQuery 方法。这是我使用的最新脚本，非常流畅:https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows

下面是如何使用它(一旦它在 jQuery 之后加载):

$(window).load(function() {
    $('.the-class-I-want-to-be-equal').responsiveEqualHeightGrid();
});

这可以是该列的子类，它允许您在这个答案中制作第二个数字。

这是一个包含一些虚假内容和齐平底部按钮的示例。你会注意到等高是有反应的，它们是每个视觉行，所以它不是最高的，而是最近的 sibling 中最高的。因此，从本质上讲，它会为您提供预期的结果:

演示:http://jsbin.com/tunohe/1/