Bootstrap 3 行中块的垂直对齐问题

Question

我使用 Bootstrap 3 和 Ruby 在 Rails 上制作 Web 应用程序。在索引页面上，我以块 "col-lg-4 col-md-4 col-sm-6" 显示所有材料（在图片上），如果块的高度不同，则它们没有垂直对齐

如何把方块排成一行，如图2？？？

我不想使用js或为块设置通用高度

更新

在index.html.haml中：

.row
  - @parks.each do |park|
    .col-lg-4.hidden-md.hidden-sm.hidden-xs
      .map_index
        .image_wrapper
          = image_tag "http://maps.google.com/maps/api/staticmap?size=400x200&sensor=false&zoom=16&markers=#{park.latitude}%2C#{park.longitude}", class: "map_image"
        %h2
          = link_to park.address, park

CSS - bootstrap 的默认网格样式

Answer 1

您可以使用引导程序<div class="clearfix"></div>

此处演示：http://jsfiddle.net/swm53ran/343/

clearfix div 是响应式列重置

Answer 2

所以，我用 each_slice() Ruby 方法在每三个块后使用 .clearfix。我的 ruby-haml 代码：

%h1.title Listing of Krasnodar's parks
.row
  - @parks.each_slice(3) do |park|
    - park.each do |p|
      .col-lg-4.col-md-4.hidden-sm.hidden-xs
        .map_index
          .image_wrapper
            = image_tag "http://maps.google.com/maps/api/staticmap?size=400x200&sensor=false&zoom=16&markers=#{p.latitude}%2C#{p.longitude}", class: "map_image"
          %h2
            = link_to p.address, p
    .clearfix

  - @parks.each_slice(2) do |park|
    - park.each do |p|
      .col-sm-6.hidden-lg.hidden-md.hidden-xs
        .map_index
          .image_wrapper
            = image_tag "http://maps.google.com/maps/api/staticmap?size=400x200&sensor=false&zoom=16&markers=#{p.latitude}%2C#{p.longitude}", class: "map_image"
          %h2
            = link_to p.address, p

  - @parks.each do |park|
    .col-xs-10.hidden-lg.hidden-md.hidden-sm.col-xs-offset-1
      .map_index
        .image_wrapper
          = image_tag "http://maps.google.com/maps/api/staticmap?size=400x200&sensor=false&zoom=16&markers=#{park.latitude}%2C#{park.longitude}", class: "map_image"
        %h2
          = link_to park.address, park

Bootstrap 3 行中块的垂直对齐问题

Problems with vertical alignment of the blocks in a row with Bootstrap 3

css

ruby

ruby-on-rails

alignment

twitter-bootstrap-3