HTML - Bootstrap Staffelung Spalten

Question

Ich habe den unten stehenden Code und möchte nur eine einfache 3 x 3 Raster (bin mit Paginat) von Eigenschaften. Wie Sie jedoch durch das Bild sehen können, sind die ersten drei gestaffelt, aber der Rest ist in Ordnung. Ich habe es so lange angeschaut, dass ich den Wald für die Bäume wahrscheinlich nicht mehr sehen kann. Irgendein Rat?

<div class="container"> 
<br> 
<h2 style="text-align: left; color: #686868;">PROPERTIES FOR SALE</h2> 
<div class="row"> 
<div class="col-sm-12" style="margin-left: 10px; margin-right: 10px;"> 
<% will_paginate @properties %> 
    <% if @properties.present? %> 
     <div class="row"> 
     <% @properties.each do |property| %> 
      <br> 
      <a href="/properties/show?property=<%= property.reference %>"> 
      <div class="col-sm-4" style="color: white;"> 
       <div class="col-sm-10 offset-sm-1" style="padding: 0; margin: 0; padding-bottom: 10px;"> 
       <div class="row" style="display: flex;"> 
       <% property.pictures.first(1).each do |picture| %> 
         <img src="<%= picture.url %>" class="img-responsive center-block" style="max-height: 250px;"/> 
       <% end %> 
       </div> 

       <div class="row" style="background-color: #2bb8d6;"> 
        <div class="row" style="width: 100%; padding: 0; margin: 0;"> 
        <h4><strong><p style="padding-left: 5%;"><%= property.price_text %></p></strong></h4> 
        </div> 
       </div> 

       <div class="row" style="background-color: #1b7b90;"> 
        <strong> 
        <p style="padding-left: 5%; padding-top: 5px; padding-bottom: 0; margin: 0;"> 
        <%= property.bedrooms %> Bedroom <%= property.property_type %> - <%= property.property_style %> 
        </p> 
        </strong> 
        <p style="padding-left: 5%"> <%= property.advert_heading %></p> 
       </div> 

       </div> 
      </div> 
      </a> 

     <% end %> 
     </div> 

    <% else %> 
     <p><h2>There are no properties containing the term <%= params[:search] %>.</h2></p> 
    <% end %> 

    <div class="row"> 
    <h4><strong><%= will_paginate @properties %></strong></h4> 
    </div> 

</div> 

Answer 1

Verwenden flex auf dem Hauptbehälter, glaube ich, ist die Haupt .row aber man muss es eine andere Klasse geben, da sie in anderen Fällen verwenden .row. Sagen wir auf der Haupt .row Container Sie eine Klasse .row-flex haben, dann gilt:

.row-flex { 
    display: flex; 
    flex-direction: row; 
} 

und dann geben flex: 1 auf den Behälter von col-sm-4

.col-sm-4 { 
flex: 1; 
} 

Answer 2

das Prüfen Größe des ersten Bildes. oder setzen Sie eine statische Breite und Höhe für jedes Bild. Beispiel:

img.propertyPic{ 
    width:200px; 
    height:200px; 
}