HTML - Bootstrap 惊人的列

Question

我有下面的代码，只想要一个简单的 3 x 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>

Answer 1

在主容器上使用 flex，我相信是主要的 .row 但你必须给它另一个类，因为你在其他情况下使用 .row。假设在主 .row 容器上有一个 .row-flex 类，然后:

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

然后将flex:1赋给col-sm-4的容器

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