Zwei Spalten gleicher Höhe - Bootstrap - CSS

Question

Momentan erstelle ich eine Produktbox mit zwei Spalten in der Nähe, links hat man das Produktbild und rechts eine Produktbeschreibung.

Das Hauptproblem ist, ich versuche, die Produktbeschreibung die gleiche Höhe wie das Bild zu machen, aber nach ein paar Versuchen habe ich nicht in der Nähe zu lösen, weil es responsive sein muss. Ich habe viele Lösungen ausprobiert, aber immer noch festgefahren, der nächste war Medienabfragen und wendet Höhe auf die .product-det an, aber es scheint, als ob es nicht der gute Weg ist.

Ich erstelle eine Bootply as a demo

Die blaue Grenze muss den Boden der Umhüllung erreichen.

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

Bitte fragen Sie nicht mit JavaScript-Lösungen muss CSS sein :)

Answer 1

Versuchen Sie Folgendes:

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

versuchen, den Text Auslassungszeichen wie das zu ändern, ist es ein bisschen unhöflich, weil ich nicht Bootstrap-Klassen verwendet haben, aber es funktioniert gut zu mir:

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

Answer 3

Try min-Höhe in verschiedenen mediaquery

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

Answer 4

einzustellen

Sie können Javascript versuchen, dies zu tun. weil Bootstrap-Col die Breite über die Zeit ändert, wenn Sie Ihre Geräte ändern. Ich mag es, es typenlos und die Klasse in Ihrem Bild Wrap setzen und Ihr Produkt descript wickeln etwa so:

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>

es auf der Bootstrap gelten. versuche dies einzugeben.

lassen Sie mich erklären, was passiert ist:

1. $('.squarethis').css({'height':st+'px}); es Ihr Bild immer Platz machen wird, und es kümmert sie nicht, welche Geräte Sie verwenden.
2. $('.sameheight').css({'height':st+'px'}); und dieses Ding wird Ihren nächsten Bootstrap col nach der Höhe Ihres vorherigen col machen.

vergessen Sie nicht, eine Klasse in Ihrem Bild-Wrapper und Beschreibung Wrapper Eingang

Answer 5

Ich würde Ihnen vorschlagen bei bootstrap v4 suchen, die mit tollen Features kommt, wie flexbox grid.

Es tut genau das, was Sie brauchen - Beispiel:

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

 
#bar{ 
 
    background-color: yellow; 
 
}

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

JSFiddle

Answer 6

einzustellen, können Sie diese Zelle (Produktbeschreibung) Ebene mit CSS. Nur ein wenig modify Klasse .border-l-default:

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

bootply