Bootstrap-Säulen haben nicht die gleiche Höhe

Question

Ich bin frustriert, weil ich nicht alle Spalten auf die gleiche Höhe bekommen kann. Im Produkt-Artikel sieht alles gut aus, genau so, wie ich es möchte. Aber in einigen Zeilen sind die Spalten nicht gleich hoch.

Ich habe alle diese Lösungen ausprobiert und ich konnte es nicht zu arbeiten ... Ich habe alle Lösungen versucht, mit display:flex

How can I make Bootstrap columns all the same height?

mir jemand sagen könnte, was ich tue, falsch ? Wie kann ich das bitte reparieren? Vielen Dank im Voraus ..

dies bisher mein Code

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

Answer 1

Versuchen Sie, diese

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> 

hier ist

Answer 2

Fügen Sie die !important Ausnahme von dem Element, in dem Sie den Stil festgelegt. Es wird die Standardregeln festgelegt durch Bootstrap außer Kraft setzen

.product-item .item-content { 
    max-height: 140px !important; 
    overflow: hidden; 
} 

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception

Answer 3

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