Gleiche Höhe Spalten Bootstrap 3

Question

Hey ich auf einer Projekt-Website arbeite, aber ich bin mit Problemen konfrontiert, mit Säulen,

<div class="row-eq-height"> 
<div class="col-xs-4 col-md-4"> 
    <div class="thumbnail"> 
     <img src="img/seo.png" height="150" width="150"> 
     <div class="caption"> 
     <h4 class="text-center">SEO Services</h4><hr class="style-one"> 
     <h4 class="text-center">We provide you with SEO Services ,which will boost your site ranking on different search engine, Google,Yahoo,etc.</h4> 
     <div class="text-right"> 
     <a href="#" class="btn btn-primary" >25$</a> 
     </div> 
     </div> 
    </div> 

    </div> 


    <div class="col-xs-4 col-md-4 "> 
    <div class="thumbnail"> 
     <img src="img/s2.png" height="150" width="150"> 
     <div class="caption"> 
     <h4 class="text-center">Websiite Templates</h4><hr class="style-one"> 
     <h4 class="text-center">Here we provide you with various different website templates,responsive, mobile interface enabled. as per your requirement.</h4> 
     </div> 
    </div> 

    </div> 


    <div class="col-xs-4 col-md-4"> 
    <div class="thumbnail"> 
     <img src="img/s3.png" height="150" width="150"> 
     <div class="caption"> 
     <h4 class="text-center">hello</h4><hr class="style-on 
     <h4></h4> 
     </div> 
    </div> 

    </div> 
</div> 

Here ist die Demo

Wie soll ich dies korrigieren.

Answer 1

Stellen Sie eine Mindesthöhe für die Klasse .thumbnail ein

.thumbnail { 
    min-height: 330px; 
} 

und für das Überlaufproblem hinzufügen

.text-center { 
    word-wrap: break-word; 
} 

Fiddle http://jsfiddle.net/8d8g7hyt/3/

Answer 2

Höhe nach immer gesetzt innerhalb des div Materie aber Sie eine Mindesthöhe für Ihre divs.set eine Mindesthöhe einstellen können als u wie folgt erhalten:

.col-xs-4{min-hieght:300px;} 

i Basisklasse von ur-Code verwendet werde. Sie können eine spezielle Klasse erstellen und ur divs zuweisen.

Answer 3

Dies ist eine Möglichkeit, indem Sie min-height angeben.

http://jsfiddle.net/8d8g7hyt/1/

.row-eq-height .col-xs-4 .thumbnail{ 
 
    min-height : 300px; 
 
} 
 

 
.row-eq-height .col-md-4 .thumbnail{ 
 
    min-height : 300px; 
 
}

<div class="row-eq-height"> 
 
<div class="col-xs-4 col-md-4"> 
 
    <div class="thumbnail"> 
 
     <img src="img/seo.png" height="150" width="150"> 
 
     <div class="caption"> 
 
     <h4 class="text-center">SEO Services</h4><hr class="style-one"> 
 
     <h4 class="text-center">We provide you with SEO Services ,which will boost your site ranking on different search engine, Google,Yahoo,etc.</h4> 
 
     <div class="text-right"> 
 
     <a href="#" class="btn btn-primary" >25$</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
     
 
    </div> 
 

 

 
    <div class="col-xs-4 col-md-4 "> 
 
    <div class="thumbnail"> 
 
     <img src="img/s2.png" height="150" width="150"> 
 
     <div class="caption"> 
 
     <h4 class="text-center">Websiite Templates</h4><hr class="style-one"> 
 
     <h4 class="text-center">Here we provide you with various different website templates,responsive, mobile interface enabled. as per your requirement.</h4> 
 
     </div> 
 
    </div> 
 
     
 
    </div> 
 

 

 
    <div class="col-xs-4 col-md-4"> 
 
    <div class="thumbnail"> 
 
     <img src="img/s3.png" height="150" width="150"> 
 
     <div class="caption"> 
 
     <h4 class="text-center">hello</h4><hr class="style-on 
 
     <h4></h4> 
 
     </div> 
 
    </div> 
 
     
 
    </div> 
 
</div>

Auch hier hängt davon ab, was Sie brauchen, ist, können Sie max-height Eigenschaft Höhe Eigenschaft zu bestimmten Punkt oder Höhe beschränken a haben Fixhöhe

Answer 4

Verwenden Jquery zu überprüfen, ob es in Ordnung ist

var maxHeight = 0; 
 

 
$('.thumbnails').each(function(){ 
 
    var thisH = $(this).height(); 
 
    if (thisH > maxHeight) { maxHeight = thisH; } 
 
}); 
 

 
$('.thumbnails').height(maxHeight);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row-eq-height"> 
 
    <div class="col-xs-4 col-md-4"> 
 
    <div class="thumbnails"> 
 
     <img src="img/seo.png" height="150" width="150"> 
 
     <div class="caption"> 
 
     <div class="title"> 
 
      <h4 class="text-center">SEO Services</h4> 
 
     </div> 
 
     <hr class="style-one"> 
 
     <div class="text"> 
 
      <p class="text-center">We provide you with SEO Services ,which will boost your site ranking on different search engine, Google,Yahoo,etc.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-xs-4 col-md-4"> 
 
    <div class="thumbnails"> 
 
     <img src="img/seo.png" height="150" width="150"> 
 
     <div class="caption"> 
 
     <div class="title"> 
 
      <h4 class="text-center">SEO Services</h4> 
 
     </div> 
 
     <hr class="style-one"> 
 
     <div class="text"> 
 
      <p class="text-center">We provide you with SEO Services ,which will boost your site ranking on different search engine, Google,Yahoo,etc.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-xs-4 col-md-4"> 
 
    <div class="thumbnails"> 
 
     <img src="img/seo.png" height="150" width="150"> 
 
     <div class="caption"> 
 
     <div class="title"> 
 
      <h4 class="text-center">SEO Services</h4> 
 
     </div> 
 
     <hr class="style-one"> 
 
     <div class="text"> 
 
      <p class="text-center">We provide you with SEO Services ,which will boost your site ranking on different search engine, Google,Yahoo,etc.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Prost !!!