HTML - Bootstrap 惊人的列答案

【问题标题】：HTML - Bootstrap staggering columnsHTML - Bootstrap 惊人的列
【发布时间】：2017-01-27 16:34:34
【问题描述】：

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

【问题讨论】：

如果您可以使用 bootply 或 jsfiddle 来重现您的问题，人们可以更轻松地提供帮助。
为什么内容在行内但在列外？您没有正确使用 Bootstrap 的网格系统。您不应该将行 div 放入行 div 或将列 div 立即放入列 div。
<br> 会导致问题吗？ PS：我还可以看到您正在嵌套行，为什么不直接使用col-sm-12（我还看到您正在使用该嵌套行上的内联样式删除边距和填充）
getbootstrap.com/css/#grid 内容应该放在列中，并且只有列可以是行的直接子级。

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：