如何在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>