Question

当我这样做时：

@textColor: green;

有效。我的文字变绿了。但是当我这样做时：

@gridColumnWidth:   10px;
@gridGutterWidth:   0px;
@fluidGridColumnWidth:  1%;
@fluidGridGutterWidth: 0%;

我的布局没有变化。有人可以解释发生了什么吗？

更新我注意到生成的CSS似乎是正确的，但在底部有一个 @media（min-width：1200px）和其他类似的部分，使用默认值重新生成网格。

Answer 1

Twitter Bootstrap制作得不是很好。它实际上很讨厌和臃肿。在responsive.less文件中，为每个响应步骤重新生成网格，因此您必须进入并根据自己的喜好进行配置。

Answer 2

网格生成是硬编码的。你可以像这样覆盖：

@import "twitter/bootstrap";

// Your custom stylesheets goes here (override Less here)
@gridColumnWidth: 10px;
@gridColumns: 16;
@fluidGridColumnWidth: 1%;

#gridSystem {
  .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
    // Default columns
    .span12 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
    .span13 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 13); }
    .span14 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 14); }
    .span15 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 15); }
    .span16,
    .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 16); }
    // Offset column options
    .offset12 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 12); }    
    .offset13 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 13); }    
    .offset14 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 14); }    
    .offset15 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 15); }    
  }
}

// Fluid grid system
// -------------------------
#fluidGridSystem {
  // Take these values and mixins, and make 'em do their thang
  .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
    // Row surrounds the columns
    .row-fluid {
      // Default columns
      .span13 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 13); }
      .span14 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 14); }
      .span15 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 15); }
      .span16 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 16); }
    }
  }
}



// Input grid system
// -------------------------
#inputGridSystem {
  .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
    input,
    textarea,
    .uneditable-input {
      &.span13 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 13); }
      &.span14 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 14); }
      &.span15 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 15); }
      &.span16 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 16); }
    }
  }
}

table {
  .span13 { .tableColumns(13); }
  .span14 { .tableColumns(14); }
  .span15 { .tableColumns(15); }
  .span16 { .tableColumns(16); }
}

Answer 3

我一直在努力解决这个问题。但我终于明白了，而且非常简单。看看我发布的问题，我也更新了一个演练解决方案。

How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

如果您有任何疑问，请告诉我们。我希望这有帮助！

要快速回答，您应该针对网格系统更改的唯一变量如下：

@gridColumns:             12;    //number of columns
@gridColumnWidth:         60px;  //column width
@gridGutterWidth:         20px;  //gutter width
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth *         (@gridColumns - 1));

您应该只更改@gridColumnWidth和@gridGutterWidth变量。百分比变量从那里计算。如果要更改每个介质查询断点的列和装订线宽度，则需要为每个断点变量执行此操作：

@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth *         (@gridColumns - 1));

// 1200px min
@gridColumnWidth1200:     70px;
@gridGutterWidth1200:     30px;
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 768px-979px
@gridColumnWidth768:      42px;
@gridGutterWidth768:      20px;
@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 *     (@gridColumns - 1));

因此，要更改整个响应式网格系统，您需要更改六个变量。 Farhan说，这不是硬编码。

改变这些变量的简单方法（同样有效地改变它们）是通过他们的网站：

http://twitter.github.com/bootstrap/customize.html

我希望这对某人有帮助！

为什么bootstrap不会忽略我的变量？

3 个答案: