web-dev-qa-db-ja.com

デフォルトを変更する方法Bootstrap Fluid Grid 12 Column Gutter Width

simple流体にfluidデフォルトの12グリッドbootstrap system（2.3.0）。

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

ガターの幅、を半分または1/4、たとえば、それによって物事がより簡単になる場合。

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

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

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

私はそれが当然であるところで信用を与えることを約束します。

更新：

ヨーダの答えで説明されているように、より少ない変数を変更するのが方法です。これらの少ない変数を変更した経験はありますか？たとえば、変更する必要がある変数は次のとおりです。

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

誰もがこれを以前にやったことがあれば、正しい方向に突き出していただければ幸いです。

csstwitter-bootstrapsassless
25
Raphael Rafatpanah

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

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

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

11
Siddharth Pandey

あなたはそれを考え過ぎているかもしれないと思います。 LESS変数を変更する際の問題は、すべての側溝で変数が変更されることです。したがって、全体のレイアウトを配置するために15px Gutterが好きであるが、そのグリッド内のフォームでGutterを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/

6
Donny V.

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

ドキュメントを読むと、ガター幅について次のことがわかります。列は、パディングを介してガター（列コンテンツ間のギャップ）を作成します。そのパディングは、.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を使用するように注意する必要があります。しかし、私の場合、これはbootstrapのOriginソースコードに触れることなく、LESSコンパイラを使用することなく、非常に効果的なソリューションでした。

1
thiscode