Twitter Bootstrap:列之间没有边距

Question

我想删除bootstrap中跨距之间的边距.

一个想法是只用零边距和填充覆盖css属性.这是一个例子:http://jsfiddle.net/kKEpY/3/

没有例外,左列浮动到右侧,它可以工作,但我更喜欢直接引导解决方案.那么bootstrap是否提供了一个清除列边距(span-fluid)的属性？

问候

Answer 1

更新:下面的解决方案是指旧版本(<2.1):从v2.1开始,流体网格将从正常网格维度自动计算 - 请参阅github上的variables.less

为了获得相同的结果,设置@gridGutterWidth于0和设置@gridColumnWidth,并@gridColumns为您认为合适的.

在那里,设置

• @fluidGridColumnWidth去8.333333333%和
• @fluidGridGutterWidth 至 0%

你可以获得(jsfiddle).

警告:生成器似乎根据您的变量和默认值(我在jsfiddle上删除了)来设置规则.

Answer 2

我遇到了与你完全相同的问题,所以这是我在最新的Bootstrap版本2.3.1上完成的方法:

首先,您需要将"无空格"类添加到父div,其类为"row",如下所示:

<div class="row-fluid no-space">
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
</div>

然后根据该行中所需的元素数修改css,如下所示:

.no-space [class*="span"]{
  margin-left: 0 !important;
  width: 25% !important; // This is for 4 elements ONLY in the row
}

宽度的数学是:

100 / number of elements in the row = width.

在我的情况下它是4个元素所以它是:

100 / 4 = 25%;

如果它是3个元素,它将是:

100 / 3 = 33.3333333333%;

如果项目中有多个案例存在此问题,您可能需要为css规则添加唯一的ID或类,以便它不会影响所有这些.

而已.无需重新下载引导程序并处理源文件
PS:此方法也适用于响应式设计;)