Twitter Bootstrap. Remove whitespace between <div span> elements in columns

I am trying to create framework for vacancies listing in pinterest-like way (infinite 5-columns wall with vacancies description) in Twitter Bootstrap using ruby-on-rails.

But I have a problem - there are whitespaces between row's elements , like here: http://i.imgur.com/m9Z5U.png

I need to delete these whitespaces to show continuous canvas.

Code I use to generate wall:

<div class="row">
  <% @employer_vacancies.reverse.each do |employer_vacancy| %>
    <div class="span2 hero-unit left">
      <h2 style="margin-bottom:0px !important";> 
        <%= employer_vacancy.vacancy_title %>  
      </h2>     
      <br>
      <%= employer_vacancy.vacancy_description %>
     </div>
  <% end %>
</div>

I believe it could be achieved by JavaScript, or maybe even by CSS.

Answers


CSS can't do this if the number of columns is variable, and you need it work in all common browsers.

Instead, use jQuery Masonry: http://masonry.desandro.com/

There's also a no-framework version, Vanilla Masonry: http://vanilla-masonry.desandro.com/


Take a look at jQuery Masonry.


Need Your Help

Which "controller" convert the XML response from a .NET WebService in JSON?

javascript .net xml json web-services

WebServices in .NET (asmx, but also wcf) use XML as schema for the information (due to the Saop protocol).

Command bindings doesn't work when other data bindings works

c# wpf data-binding binding wpf-controls

I am using the Jarloo's calendar control and add some changes on it to fulfil my needs. I've been struggling with this for a long time now and I've no idea on what could possibly be the cause of my