css - Twitter Bootstrap：列之间没有边距

Question

我想删除引导程序中跨度之间的边距。

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

除了左列浮动到右列之外，它都可以工作，但我更喜欢直接引导解决方案。那么 bootstrap 是否提供了一个清除列边距的属性（跨度流体）？

问候

Answer 1

更新：下面的解决方案是指旧版本（< 2.1）：从 v2.1 开始，流体网格是根据正常网格尺寸自动计算的 - 请参阅github 上的 variables.less

要获得相同的结果，请将and设置@gridGutterWidth为您认为合适的值。0@gridColumnWidth@gridColumns

---

在那里，设置

• @fluidGridColumnWidth到8.333333333%和
• @fluidGridGutterWidth到0%

你可以得到那个 (jsfiddle)。

警告：生成器似乎根据您的变量和默认变量（我在 jsfiddle 上删除）放置了规则。

Answer 2

我遇到了和你一样的问题，所以这是我在最新的 Bootstrap 版本 2.3.1 上解决这个问题的方法：

首先，您需要使用类“row”向父 div 添加一个“no-space”类，如下所示：

<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：此方法也适用于响应式设计；）

Answer 3

上面的答案真的很有帮助，但我的情况有点不同。

我在html中有一个span4和一个span8 div，html代码是这样的：

<div class="row">
    <div class="span4">Content of span4</div>
    <div class="span8">Content of span8</div>
</div>

为了做到这一点，我不仅应该将margin-left重写为 0，而且还必须自定义 span4 和 span8 的宽度。所以这是对我有用的代码：

.no-space [class*="span"]{
  margin-left: 0 !important;

  &.span8{
      width: 75%;
  }
  &.span4{
      width: 25%;
  }
}

谢谢你的灵感！

Answer 4

我想在我的 HTML 中使用带边距的跨度和不带边距的跨度。当使用较少时，这很容易。只需创建您自己的 less 文件，将其命名为“no-margin-span.less”，并将其包含在 less 代码中的某个位置。之后，您可以在 html 文件中使用“no-margin-span5”而不是“span5”。这与例如“no-margin-offset5”和“offset5”相同。“no-margin-span.less”文件应包含以下代码：

#grid {
    .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {

        .no-margin-spanX (@index) when (@index > 0) {
          (~".no-margin-span@{index}") { .no-margin-span(@index); }
          (~'.no-margin-span@{index}:first-child') { .no-margin-spanFirstChild(@index); }
          .no-margin-spanX(@index - 1);
        }
        .no-margin-spanX (0) {}

        .no-margin-offsetX (@index) when (@index > 0) {
          (~'.no-margin-offset@{index}') { .no-margin-offset(@index); }
          .no-margin-offsetX(@index - 1);
        }
        .no-margin-offsetX (0) {}

        .no-margin-offset (@columns) {
          margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
          *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
        }

        .no-margin-span (@columns) {
            width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + @fluidGridGutterWidth;
            *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%));
        }

        .no-margin-spanFirstChild (@columns) {
            width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
            *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
        }

        .row-fluid {
            [class*="no-margin-span"] {
                .input-block-level();
                float: left;
                margin-left: 0;
            }

            // generate .no-margin-spanX and .no-margin-offsetX
            .no-margin-spanX (@gridColumns);
            .no-margin-offsetX (@gridColumns);
        }
    }
}

编辑 - 要使此代码具有响应性，请将以下代码添加到“no-margin-span.less”文件中：

@media (max-width: 767px) {
    // Make all grid-sized elements block level again
    [class*="no-margin-span"],
    .uneditable-input[class*="no-margin-span"], // Makes uneditable inputs full-width when using grid sizing
    .row-fluid [class*="no-margin-span"],
    [class*="no-margin-span"]:first-child,
    .uneditable-input[class*="no-margin-span"]:first-child, // Makes uneditable inputs full-width when using grid sizing
    .row-fluid [class*="no-margin-span"]:first-child {
        float: none;
        display: block;
        width: 100%;
        margin-left: 0;
        .box-sizing(border-box);
    }
    .no-margin-span12,
    .row-fluid .no-margin-span12 {
        width: 100%;
        .box-sizing(border-box);
    }
    .row-fluid [class*="offset"]:first-child {
        margin-left: 0;
    }

    // FORM FIELDS
    // -----------
    // Make no-margin-span* classes full width
    .input-large,
    .input-xlarge,
    .input-xxlarge,
    input[class*="no-margin-span"],
    select[class*="no-margin-span"],
    textarea[class*="no-margin-span"],
    .uneditable-input {
        .input-block-level();
    }
    // But don't let it screw up prepend/append inputs
    .input-prepend input,
    .input-append input,
    .input-prepend input[class*="no-margin-span"],
    .input-append input[class*="no-margin-span"] {
        display: inline-block; // redeclare so they don't wrap to new lines
        width: auto;
    }
    .controls-row [class*="no-margin-span"] + [class*="no-margin-span"] {
        margin-left: 0;
    }
}