HTML-引导交错列

我有下面的代码，只是想要一个简单的3乘3网格（我使用分页）的属性。然而，正如您从图中看到的，前三个是交错的，但其余的都很好。我已经看了很久了，现在我可能看不见树木了。有什么建议吗

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

待售物业


没有包含该术语的属性

---

在主容器上使用flex，我认为它是主.row，但由于在其他情况下使用.row，因此必须给它另一个类。假设在main.row容器上有一个class.row flex，然后：

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

然后给col-sm-4的容器加上flex:1

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

---

检查第一张图片的大小。或者为每张图片设置静态宽度和高度。例如：

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

---

如果您可以使用bootply或jsfiddle来重现您的问题，人们可以帮助您更容易地解决问题。为什么您的内容在一行内而在一列外？您没有正确使用引导的网格系统。您不应该将行div放在行div中，或将列div立即放在列div中。

是否会导致此问题？PS：我还可以看到您正在嵌套行，为什么不直接使用

col-sm-12

（我还看到您正在删除该嵌套行上具有内联样式的边距和填充）内容应该放在列中，并且只有列可以是行的直接子行。