使用Bootstrap 3在一行中垂直對齊的問題

我使用Bootstrap 3和Ruby On Rails創建了Web應用程序。在索引頁上，我顯示了塊「col-lg-4 col-md-4 col-sm-6」（圖片上）中的所有材料，並且如果塊的高度不同，則它們不是垂直對齊的使用Bootstrap 3在一行中垂直對齊的問題

如何在一行中對齊塊，如圖2所示？

我不想使用塊

UPDATE

在index.html.haml一個js或一組常見的高度：

.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 - 引導程序的默認網格樣式

來源

2015-10-02 Evgeny Palguev

哪裏是你的HTML和CSS。怎麼可能沒有代碼 – Chris

我加了haml代碼，boostrap的樣式是默認的 –

可以使用白手起家<div class="clearfix"></div>

演示在這裏：http://jsfiddle.net/swm53ran/343/

的clearfix DIV是一個負責任的列重置

來源

2015-10-02 20:08:36 indubitablee

謝謝！以及如何在haml/ruby代碼中使用它？ –

所以，我我與each_slice() Ruby的方法outpuе每三個街區後useв.clearfix 。我紅寶石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

來源

2015-10-02 20:51:55

使用Bootstrap 3在一行中垂直對齊的問題

回答

相關問題