Css 为什么引导程序不忽略我的变量？

当我这样做时：

@textColor: green;

它起作用了。我的文本变成绿色。但当我这样做的时候：

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

我的布局没有改变。有人能解释发生了什么事吗

更新 我注意到生成的css看起来是正确的，但是在底部有一个

---

@介质（最小宽度：1200px）和其他类似部分，使用默认值重新生成网格。

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

@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); }
}

---

Twitter引导程序设计得不是很好。事实上，它既烦人又臃肿。在responsive.less文件中，网格将为每个响应步骤重新生成，因此您必须进入其中并根据自己的喜好进行配置

我自己也为此奋斗了一段时间。但我终于明白了，这是难以置信的简单。看一看我发布的问题，在那里我还更新了一个走查解决方案

如果你有任何问题，请告诉我。我希望这有帮助

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

@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所说的那样是硬编码的

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

---

我希望这对某人有所帮助

当我尝试这样做时，它似乎生成了正确的网格css，但之后它生成了默认的网格css，这让我回到了开始的地方。