为什么引导程序更少忽略我的变量？

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

我希望这对某人有所帮助！