Question

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

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

Answer 2

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

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

HTML - Bootstrap令人咋舌的列

2 个答案: