使用 Bootstrap 3 将块垂直对齐的问题答案

【问题标题】：Problems with vertical alignment of the blocks in a row with Bootstrap 3使用 Bootstrap 3 将块垂直对齐的问题
【发布时间】：2015-12-31 02:56:11
【问题描述】：

我使用 Bootstrap 3 和 Ruby On 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 的默认网格样式

【问题讨论】：

你的html和css在哪里。没有代码怎么可能帮助你
我添加了haml代码，boostrap的样式是默认的

标签： css ruby-on-rails ruby twitter-bootstrap-3 alignment

【解决方案1】：

所以，我在每三个块之后使用.clearfix，我用each_slice() Ruby 方法输出。我的 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

【讨论】：

【解决方案2】：

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

在这里演示：http://jsfiddle.net/swm53ran/343/

clearfix div 是一个响应式列重置

【讨论】：