25

流動的なデフォルトの12グリッドブートストラップシステム（2.3.0）でガターを変更することが知られている簡単な解決策があるかどうかを知りたいと思っています。

私はLESSに詳しくありませんが、それが答えである場合は、どのように変更できるかについても説明してください. サスも同様。

たとえば 、ガター幅を半分または4 分の 1に変更しても問題ないことに注意してください。

次の目標を達成する必要があります。

  1. 将来的にブートストラップを更新できる必要があります。これは、実際のブートストラップ ファイルを編集しないことを意味します。
  2. 他のすべてのオブジェクトの機能はそのままにしておく必要があります。
  3. シンプルでなければなりません。10 行未満の CSS。たとえば、追加されたクラスか何か。

私はスタック オーバーフロー全体を検索しましたが、このようなことを行う方法がわかりません。私の知る限りでは、カスタマイズされた Bootstrap をダウンロードすると、非流体グリッドのカスタム ガター幅のみがレンダリングされます。以前に独自の流体グリッド システムをコーディングしたことがあるので、数学は理解できますが、結果が生じる可能性があるのではないかと心配しており、クラス オーバーライドに関する既知の問題を共有できると助かります。

当然のことながら信用を与えることを約束します。

アップデート：

Yoda's answer で説明されているように、より少ない変数を変更することが道です。これらの少ない変数を変更した経験がある人はいますか? たとえば、変更する必要がある変数は次のとおりだと思います。

// Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 768px-979px
@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);

このようなものを変更するにはどうすればよいでしょうか。多分：

@fluidGridGutterWidth768:      percentage(1.5);

誰かがこれを以前に行ったことがある場合は、正しい方向に押し込んでいただければ幸いです。

4

3 に答える 3

11

最も簡単な方法は、おそらく Twitter Bootstrap が提供するカスタマイズ可能なダウンロードを使用することです。フォームのニーズに合わせて @fluidGridGutterWidth 変数を変更します。ここから以下のファイルをダウンロードします。github ブートストラップ プロジェクトから variable.less ファイルにアクセスして、次のコードを変更できます。

    // Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth); // <= this one

最初はアクセスできるファイルが少ないと思っていましたが、Web サイトでカスタマイズされた GUI を使用していることに気付きました。少ないファイルをダウンロードして、変更を加えるだけです。次に、less ファイルをコンパイルして css ファイルを作成するか、less を開発に使用します。デプロイには css または min.css を使用できます。

于 2013-02-12T00:59:21.317 に答える
6

私はあなたがそれを考えすぎているかもしれないと思います。LESS 変数を変更する際の問題は、すべてのガターに対して変更されることです。したがって、レイアウト全体を配置するための 15 ピクセルのガターが好きで、そのグリッド内のフォームのガターを 5 ピクセルにしたい場合、機能しません。

2 つの css クラスを作成して、ガターを変更する領域をオーバーライドするだけです。

これを「行」レベルで適用します。

.row-5-gutter{
    margin-left: -5px;
    margin-right: -5px;
}

これを「列」レベルで適用します。

.col-5-gutter{
    padding-left: 5px;
    padding-right: 5px;
}

デモ: http://jsfiddle.net/tg7Ey/

于 2014-03-21T02:44:49.920 に答える
1

私もこの問題の簡単な解決策を探していました。私の目標は、LESS ではなく単純な CSS を使用することでした。この回答は、LESSのコンパイルまたはブートストラップのオンラインコンパイラの使用に基づいて、私が見つけた他の回答と同様です。だから私は自分の解決策を見つけようとしました。

ドキュメンテーションを読むと、gutter-width について次のことがわかります。そのパディングは、.rows の負のマージンを介して、最初と最後の列の行でオフセットされます。

これに基づいて、私は次のことを試しました：

.container {padding-left:1px;padding-right:1px;}
.row {margin-left:-1px;margin-right:-1px;}
.row > div {padding-left:1px;padding-right:1px;}

今から、ガター幅はわずか 2 ピクセルでした。私の次の問題は、意図した幅が奇数だったことです。私の解決策は、左側のパディングとマージンを削除し、完全に右側に配置することでした:

.container {padding-left:0;padding-right:5px;}
.row {margin-left:0;margin-right:-5px;}
.row > div {padding-left:0;padding-right:5px;}

今、私は5ピクセルのガター幅を持っています。

ブートストラップを使用できるすべてのシナリオでこれをテストしたわけではありません。特に、container-div 内の row-div 内で column-div のみを使用するように注意する必要があります。しかし、私の場合は、ブートストラップの元のソース コードに触れたり、LESS コンパイラを使用したりすることなく、非常に効果的なソリューションでした。

于 2013-11-19T12:55:16.363 に答える