I am getting frustrated because I can't get all the columns the same height. Everything looks great inside the product-item , just the way I want it.But on some rows the columns are not the same height.
I've tried all these solutions and I couldn't get it to work...I've tried all the solutions with display:flex
How can I make Bootstrap columns all the same height?
Could someone tell me what I am doing wrong ? How can I fix this please ? thanks in advance..
this is my code so far
<div class="container col-xs-12 col-sm-12 col-md-12">
<div class="product-item col-xs-12 col-sm-12 col-md-4">
<a href="#">
<div class="item-img col-xs-6 col-sm-6 col-md-6">
<img src="#">
<p style="font-size:13px;"><b>Exp date</b></p>
<p class="price"><b>$1.09</b></p>
</div>
<div class="item-content col-xs- col-sm-6 col-md-6">
<h3>Title</h3>
<p>Description</p>
</div>
</a>
</div>
</div>
.product-item {
width: 368px;
min-height: 150px;
background: none;
padding: 12px 0px 10px 0px;
margin: 10px 5px;
color: #000;
text-align: left;
border: 2px solid #F48B3A;
}
.product-item .item-content {
max-height: 140px;
overflow: hidden;
}
.item-img .price {
color: blue;
font-weight: 600;
font-size: 14px;
}
答案 0 :(得分:1)
Add the !important
exception to the element where you set the style.
It will override the default rules set by Bootstrap
.product-item .item-content {
max-height: 140px !important;
overflow: hidden;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception
答案 1 :(得分:1)
试试这个
CSS
.product-item .row {
display: table;
margin: 0;
table-layout: fixed;
width: 100%;
}
.item-img,
.item-content {
float: none !important;
display: table-cell;
}
Html
<div class="container col-xs-12 col-sm-12 col-md-12">
<div class="product-item col-xs-12 col-sm-12 col-md-4">
<a href="#" class="row">
<div class="item-img col-xs-6 col-sm-6 col-md-6">
<img src="#">
<p style="font-size:13px;"><b>Exp date</b></p>
<p class="price"><b>$1.09</b></p>
</div>
<div class="item-content col-xs- col-sm-6 col-md-6">
<h3>Title</h3>
<p>Description</p>
</div>
</a>
</div>
</div>
这里是fiddle
答案 2 :(得分:1)
<div class="bs-example" data-example-id="thumbnails-with-custom-content">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/100%x200" alt="100%x200" style="height: 200px; width: 100%; display: block;" src="#" data-holder-rendered="true">
<div class="caption">
<h3>Title</h3>
<p>Description</p>
<p style="font-size:13px;"><b>Exp date</b></p>
<p class="price"><b>$1.09</b></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail"> <img data-src="holder.js/100%x200" alt="100%x200" style="height: 200px; width: 100%; display: block;" src="#" data-holder-rendered="true">
<div class="caption">
<h3>Title</h3>
<p>Description</p>
<p style="font-size:13px;"><b>Exp date</b></p>
<p class="price"><b>$1.09</b></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail"> <img data-src="holder.js/100%x200" alt="100%x200" style="height: 200px; width: 100%; display: block;" src="#" data-holder-rendered="true">
<div class="caption">
<h3>Title</h3>
<p>Description</p>
<p style="font-size:13px;"><b>Exp date</b></p>
<p class="price"><b>$1.09</b></p>
</div>
</div>
</div>
</div>
</div>