CODEWITHSUNDEEP
cssruby-on-railsrubytwitter-bootstrap-3alignment
Evgeny Palguev
Evgeny Palguev

Reputation: 609

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

I make web application using Bootstrap 3 and Ruby On Rails. On the index page I show all materials in blocks "col-lg-4 col-md-4 col-sm-6" (on picture) and if the height of the blocks is different, then they are not aligned vertically

enter image description here

How do I align the blocks in a row, as in the picture 2???

enter image description here

I do not want to use a js or set common height for blocks

UPDATE

In 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's default grid styles

Upvotes: 0

Views: 172

Answers (2)

Evgeny Palguev
Evgeny Palguev

Reputation: 609

So, I useв .clearfix after each three blocks which I outpuе with each_slice() Ruby-method. My ruby-haml code:

%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

Upvotes: 0

indubitablee
indubitablee

Reputation: 8216

you can use bootstraps <div class="clearfix"></div>

demo here: http://jsfiddle.net/swm53ran/343/

the clearfix div is a responsive column reset

Upvotes: 1

Related Questions