推特引导。删除列中 <div span> 元素之间的空格答案

【问题标题】：Twitter Bootstrap. Remove whitespace between <div span> elements in columns推特引导。删除列中 <div span> 元素之间的空格
【发布时间】：2012-06-11 11:07:14
【问题描述】：

我正在尝试使用 ruby-on-rails 在 Twitter Bootstrap 中以类似 pinterest 的方式（带有空缺描述的无限 5 列墙）创建空缺列表的框架。

但我有一个问题 - 行的元素之间有空格，如下所示： http://i.imgur.com/m9Z5U.png

我需要删除这些空格以显示连续的画布。

我用来生成墙的代码：

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

我相信它可以通过 JavaScript 甚至 CSS 来实现。

【问题讨论】：

您是否一直在考虑为整行分配一些背景？如果您的设计不是响应式的，这可能是最好的主意（否则它在不同的分辨率下看起来会有所不同）。
可以接受 CSS3 解决方案吗？可以使用简单的 css 来完成，但我认为 IE 可能不支持该解决方案，直到 9+。
谢谢大家！我认为 jQuery Masonry 是解决这个问题的正确工具

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

【解决方案1】：

如果列数是可变的，CSS 就无法做到这一点，并且您需要它在所有常见的浏览器中都可以工作。

改为使用 jQuery Masonry：http://masonry.desandro.com/

还有一个无框架版本，Vanilla Masonry：http://vanilla-masonry.desandro.com/

【讨论】：

【解决方案2】：

看看jQuery Masonry。

【讨论】：