html - 两列相同高度 - Bootstrap - CSS

Question

目前我正在创建一个产品框，其中两列彼此相邻，左边一列是产品图片，右边一列是产品描述。

主要问题是，我试图使产品描述与图片高度相同，但尝试了几次后我没有接近解决它，因为它需要响应。我尝试了很多解决方案但仍然卡住了，最接近的是使用媒体查询并将高度应用于 .product-det 但似乎这不是好方法。

我创建了一个 Bootply as a demo .

蓝色边框必须到达 wrapper 的底部。

HTML

<div class="container">
    <div class="col-xs-6">
        <div class="col-xs-12 padding-15 margin-b-15 border-default padding-t-0 padding-b-0">
            <div class="row">
                <div class="col-xs-12">
                    <div class="row">
                        <div class="col-xs-4 col-sm-3 nopadding">
                            <img class="img-responsive" src="http://placehold.it/250x250">
                        </div>
                        <div class="col-xs-8 col-sm-9 border-l-default">
                            <div class="row">   <a href="#" title="" class=""><h4 class="col-xs-10 margin-t-15 text-ellipsis">Article pokeball superpotion lighting boltubertext pokemon pikachu</h4></a>

                                <div
                                class="col-xs-2 padding-t-15">  <span class="pointer pull-right">
                                                    <i class="glyphicon glyphicon-remove"></i>
                                                </span>

                            </div>
                            <div class="product-det col-xs-12 line-h-35">
                                <div class="row">
                                    <div class="col-xs-4">ITEMID</div>
                                    <div class="col-xs-4">
                                        <div class="input-group">
                                            <input class="form-control" placeholder="qnt" type="text">  <span class="input-group-btn">
                                                        <button class="btn btn-secondary" type="button">
                                                        <span class="glyphicon glyphicon-refresh"></span>

                                            </button>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-xs-4"><span class="pull-right">3.203 €</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="">Right content</div>
</div>

CSS

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.padding-15 {
  padding: 15px;
}
.padding-t-15 {
  padding-top: 15px;
}
.margin-b-15 {
  margin-bottom: 15px;
}
.border-default{
  border: 1px solid #e0e0e0;
}
.padding-t-0 {
  padding-top: 0px;
}
.padding-b-0 {
  padding-bottom: 0px;
}
.nopadding {
  padding: 0;
}
.line-h-35 {
  line-height: 35px;
}
.border-l-default {
  border-left: 1px solid blue;
}

Answer 1

尝试以下操作:

HTML:

<div class="row row-eq-height">
  <!--The div columns you want them to be same height should be here-->
</div>

CSS:

/*
  Row with equal height columns
*/
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
 }