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>
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.