Html 两列相同高度-引导-CSS

目前，我正在创建一个产品框，其中两列相邻，左一列显示产品图像，右一列显示产品说明

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

.product det

，但这似乎不是好方法

我已经创建了一个

蓝色边框必须到达包装的底部

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>

请尝试以下操作：

Html:

---

尝试这样更改文本省略号，这有点粗鲁，因为我没有使用引导类，但对我来说效果很好：

.text-ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-bottom: 71px;
}

---

尝试在不同的mediaquery中设置最小高度

.border-l-default {
    border-left: 1px solid blue;
    min-height: 135px;

---

您可以尝试使用javascript来实现这一点。因为当您更改设备时，引导col会随着时间的推移而改变宽度。我喜欢它，它是无类型的，您可以将类放入图像包装和产品描述包装中，如下所示：

var st=$（'.squarethis'）.width（）；
$（'.squarethis'）.css（{'height'：st+'px'}）；
$（'.sameheight'）.css（{'height'：st+'px'}）
.wrapper{
背景：#ccc；
宽度：100%；
身高：100%；
显示器：flex；
柔性包装：包装；
弯曲方向：行；}
prodImage{
宽度：30%；
背景：红色；}
普罗德斯先生{
宽度：70%；
背景：绿色；}
我建议你看看哪些功能很棒，比如

它正好满足您的需要-例如：


#foo{
背景色：浅绿色；
高度：300px；
}
#酒吧{
背景颜色：黄色；
}

福
酒吧
您可以使用纯css调整此单元格（产品说明）。只需稍微修改一下类
。border-l-default
：

.border-l-default {
  border-left: 1px solid blue;
  height: 100%;
  position: absolute;
  right: 0;
}

图像是否应为方形？我的意思是不是250px 250px，我的意思是高度应该跟你的引导列宽度一致？这是没有flex和js的解决方案：啊，很好，你比我快了一分钟XDS-，你是个向导吗？它可以工作，我可以有一点更多的信息，如果它能在所有浏览器上工作吗？：）谢谢男人：）。是的，显示：flex在不同的浏览器中工作良好…请检查此项抱歉，它将无法工作，因为小型设备的高度较小：）抱歉，它必须是响应解决方案，固定高度将破坏响应：）在所有媒体中设置最小高度query@Troyer由于bootstrap col每次都会更改宽度，你现在猜不出那个装置有多高。不幸的是，我不知道css有这种技术来理解“它有多高”。欢迎光临。
.text-ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-bottom: 71px;
}

.border-l-default {
    border-left: 1px solid blue;
    min-height: 135px;

.border-l-default {
  border-left: 1px solid blue;
  height: 100%;
  position: absolute;
  right: 0;
}