2

私がする時：

@textColor: green;

できます。テキストが緑色に変わります。しかし、私がするとき：

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

私のレイアウトに変更はありません。誰かが何が起こっているのか説明できますか?

更新 生成された css は正しいように見えますが、下部に @media (最小幅: 1200px) と、デフォルト値でグリッドを再生成する他の同様のセクションがあります。

4

3 に答える 3

1

Twitter Bootstrap はあまりよくできていません。それは実際に迷惑で肥大化しています。Respond.less ファイルでは、レスポンシブ ステップごとにグリッドが再生成されるため、そこに移動して好みに合わせて構成する必要があります。

于 2012-06-13T10:17:08.633 に答える
0

私はしばらくの間、これに苦労してきました。しかし、私はついにそれを理解しました、そしてそれは信じられないほど簡単です. ウォークスルー ソリューションも更新した場所に投稿した質問を見てください。

デフォルトの Bootstrap Fluid Grid 12 列ガター幅を変更する方法

ご不明な点がございましたら、お気軽にお問い合わせください。これが役立つことを願っています！

簡単な答えとして、グリッド システムに関して変更する必要がある変数は次のとおりです。

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

したがって、レスポンシブ グリッド システム全体を変更するには、6 つの変数を変更します。Farhanが述べているように、これはハードコードされていません。

これらの変数を変更する最も簡単な方法 (自分で変更するのと同じくらい効果的) は、次の Web サイトを使用することです。

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

これが誰かを助けたことを願っています！

于 2013-02-12T21:58:02.790 に答える
0

グリッドの生成はハードコーディングされています。次のようにオーバーライドできます。

@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); }
}
于 2012-06-08T02:49:08.393 に答える