Question

目前我正在创建一个彼此靠近的两列产品包装盒，其中一列产品图片和一个产品描述。

主要问题是，我正在尝试使产品描述与图像的高度相同，但经过几次尝试后我没有接近解决它，因为它需要响应。我尝试了很多解决方案，但仍然坚持，最接近的是使用媒体查询并将高度应用于.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>

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;
 }

Answer 2

你可以试试javascript来做到这一点。因为更改设备时bootstrap col会超时更改宽度。我喜欢它，它没有类型，你可以把类放在你的图像包装中，你的产品描述包装如下：

var st = $('.squarethis').width();
$('.squarethis').css({'height':st+'px'});
$('.sameheight').css({'height':st+'px'});

.wrapper{
background:#ccc;
width:100%;
height:100%;
display:flex;
flex-wrap:wrap;
flex-direction:row;}

.prodImage{
width:30%;
background:red;}

.prodDesc{
width:70%;
background:green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="prodImage squarethis"></div>
<div class="prodDesc sameheight"></div>
</div>

它将适用于你的引导程序。试着输入这个。

让我解释一下发生了什么：

$('.squarethis').css({'height':st+'px});它会使您的图片始终保持正方形，并且不关心您使用的设备。
$('.sameheight').css({'height':st+'px'});这件事会让你的下一个bootstrap col跟随前一个col的高度。

不要忘记在图像包装器和描述包装器中输入类

Answer 3

我建议您查看bootstrap v4附带的精彩功能，例如flexbox grid。

它完全符合您的需要 - 例如：

＆＃13;

#foo{
  background-color: aqua;
  height: 300px;
}

#bar{
  background-color: yellow;
}

＆＃13;

<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-6" id="foo">foo</div>
    <div class="col-sm-6" id="bar">bar</div>
  </div>
</div>

＆＃13;

JSFiddle

Answer 4

您可以使用普通css调整此单元格（产品说明）。只需稍加修改一下.border-l-default：

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

<强> bootply

Answer 5

尝试更改文本省略号，它有点粗鲁，因为我没有使用bootstrap类，但它对我来说很好用：

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

Answer 6

尝试在不同的媒体查询中设置min-height

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

两列相同的高度 - Bootstrap - CSS

6 个答案: