Bootstrap 4卡与文本和图像的高度相等

时间:2019-06-01 03:20:24

标签: css bootstrap-4

我在引导程序4中有卡。它是从数据库动态填充的文本和图像。如果图像为空或为空或卡片文本较大,则卡片高度会增加。看到它很生气。这是图片

enter image description here

上图显示了两张卡。一个有图像,另一个没有图像。卡显示不相等。除了没有卡片图像外,文字位于顶部。我用下面的代码填充

           var html = '';
            for(var i = 0; i < data.length;i++){
                var item = data[i];
                 var img = item.photo;
                 html += '<div class="card row-eq-height" style="margin-right: 1rem !important; "  title="click add '+item.name+' to cart">';
                html += '<img class="card-img-top" src="'+img+'" alt="Card image cap" style="widht:50px;height:100px;">';
                html += '<div class="card-body" style="padding:2px 5px;">';
                html += '<p class="card-text" style="line-height:1.0em;overflow-y: auto;  max-height: 50px;">'+item.name+'</p>';
                html += '</div>';
                html += '</div>';
            }

我要保持每张卡的高度和宽度相等。如果图像为空,则显示波纹管。如果文本较大,则将滚动。

请帮助我找出解决方案

0 个答案:

没有答案