twitter-bootstrap - 如何在 Bootstrap 中制作等高列？

Question

对于具有不同内容的列，我无法获得相同的高度。

<div class="row row-flex row-flex-wrap">
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img class="img-responsive center-block" src="img/tabano.jpg" alt="..." data-src="holder.js/242x200/auto">
                <div class="caption">
                    <h3>Tábano</h3>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                    <p>
                        <a href="index.html" class="btn btn-primary" role="button">Button</a> 
                        <a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img class="img-responsive center-block" src="img/tabano.jpg" alt="..." data-src="holder.js/242x200/auto">
                <div class="caption">
                    <h3>Tábano</h3>
                    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                    <p>
                        <a href="index.html" class="btn btn-primary" role="button">Button</a> 
                        <a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
        </div>

第一个内容比第二个长，但列的高度不同，即使使用 row-flex。

---

Bootply Link

Answer 1

您需要添加一些 CSS 和一个额外的行...

看看at this demo bootply

这个 CSS:

@media (min-width: 768px) {

  .eq-height-thumbs{
      overflow:hidden;
  }

  .eq-height-thumbs .thumbnail{
      margin-bottom: -99999px;
      padding-bottom: 99999px;
  }

  .eq-height-thumbs-base{
      overflow:hidden;
  }

  .eq-height-thumbs-base .thumbnail{
      margin-top: -15px
  }

}

对于这个 HTML:

<div class="row eq-height-thumbs">
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img class="img-responsive center-block" src="img/tabano.jpg" alt="..." data-src="holder.js/242x200/auto">
            <div class="caption">
                 <h3>Tábano</h3>

                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                <p> <a href="index.html" class="btn btn-primary" role="button">Button</a>  <a href="#" class="btn btn-default" role="button">Button</a>

                </p>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img class="img-responsive center-block" src="img/tabano.jpg" alt="..." data-src="holder.js/242x200/auto">
            <div class="caption">
                 <h3>Tábano</h3>

                <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                <p> <a href="index.html" class="btn btn-primary" role="button">Button</a>  <a href="#" class="btn btn-default" role="button">Button</a>

                </p>
            </div>
        </div>
    </div>
</div>
<div class="row eq-height-thumbs-base hidden-xs">
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">&nbsp;</div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">&nbsp;</div>
    </div>
</div>