流体グリッドブートストラップデフォルトを変更する方法12列ガ​​ター幅

Question

私は流体デフォルト12グリッドのブートストラップシステム（2.3.0）上でガターを変更することが知られている任意のシンプル解決策があるかどうかを知るために探しています。

私はLESSに精通していませんが、それが答えであれば、変更方法についても説明してください。 Sassと同じです。

それは、物事を簡単にする可能性がある場合、例えば、半分または四分の一によってガター幅、を変更することが完全に許容可能であることに注意してください。

以下の目標を満たしている必要があります

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

私はスタックオーバーフロー全体を検索していますが、このようなことをやり遂げる方法についてはまだ分かりません。私の理解を深めるために、カスタマイズされたブートストラップをダウンロードするだけで、非流体グリッドのカスタム溝幅がレンダリングされます。以前は自分の流体グリッドシステムをコーディングしていましたので、数学を理解していますが、結果が出るかもしれないと心配しています。クラスオーバーライドに関する既知の問題があれば助けになります。

私はそれが期日であることを約束します。

UPDATE：ヨーダの答えで説明したように以下の変数を変更

は、移動するための方法です。誰もこれらの変数を変更する経験はありますか？たとえば、変更する必要がある変数は次のとおりです。

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

誰でもこれを前に行っていれば、正しい方向に押していただければ幸いです。

Answer 1

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

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

私はその後、私はあなたが上でカスタマイズしたGUIを使用している実現し、あなたが最初に以下のファイルへのアクセスを持っていたと思いましたウェブサイト少ないファイルをダウンロードして変更してください。次に、少ないファイルをコンパイルしてCSSファイルを作成したり、開発に使うファイルを少なくします。デプロイメントには、cssまたはmin.cssを使用できます。

Answer 2

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

ドキュメントを読むと、ガター幅に関する次のような情報が得られます。列は、パディングを介して溝（溝の内容間のギャップ）を作成します。そのパディングは、.rowsの負のマージンを介して最初と最後の列の行でオフセットされます。これに基づき

iは、次のことを試してみました：

.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コンパイラを使用したりすることなく、非常に効果的な解決策でした。

Answer 3

私はあなたがそれを考えすぎるかもしれないと思います。 LESS変数を変更する際の問題は、すべての溝に対して変更されることです。だから、私はすべてのレイアウトを配置するための15pxの樋が好きだが、その樋の中のフォームのために樋が5pxになるようにしたい場合、それは動作しません。

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

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

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

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

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

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