web-dev-qa-db-ja.com

Bootstrap 3ガターサイズ

私はbootstrap=で作業を始めたばかりで、目標を達成する方法がわかりません。

この画像にあるように、溝がすべて均等になるようにしたい：

enter image description here

デフォルトでは、これらは次のようになります。列の間にある縦の溝（青でマーク）は、横と外側の溝の2倍です：

enter image description here

これを解決するための最善の方法についての助けをいただければ幸いです。

twitter-bootstraptwitter-bootstrap-3gutter
29
Billy

試してください：

.row {
    margin-left: 0;
    margin-right: 0;
}

すべての列の両側に15ピクセルのパディングがあります。これにより、30ピクセルのガターが作成されます。 sm-gridの場合、コンテナクラスは970px（（（940px + @ grid-Gutter-width）））になります。すべての列の幅は940/12です。結果として生じるグリッドの両側の@ grid-Gutter-width/2は、負のマージン-15px;で非表示になります。この負の左マージンを取り消すと、グリッドの両側に30ピクセルのガターが設定されます。このガターは、15ピクセルの列のパディング+ 15ピクセルの静止グリッドスペースで構築されます。

更新

@ElwoodPの回答に応じて、次のコードを検討してください。

<div class="container" style="background-color:darkblue;">  
<div class="row" style="background-color:yellow;">
  <div class="col-md-9" style="background-color:green;">
    <div style="background-color:lightblue;">div 1: .col-md-9</div>
    <div class="row" style="background-color:orange;">
      <div class="col-md-6" style="background-color:red;">
        <div style="background-color:lightblue;">div 2: .col-md-6</div>
      </div>
      <div class="col-md-6" style="background-color:red;">
        <div style="background-color:lightblue;">div 2: .col-md-6</div>
      </div>
    </div>
  </div>  
  <div class="col-md-3" style="background-color:green;">
    <div style="background-color:lightblue;">div 1: .col-md-3</div>
  </div>      
</div>
</div>

ネストの場合、.rowクラスの操作は実際にサブグリッドに影響します。良いか悪いかは、サブグリッドに対する期待/要件に依存します。 .rowのマージンを変更しても、サブグリッドは破損しません。

デフォルト：

enter image description here

.rowクラスのマージン

で：

.row {
    margin-left: 0;
    margin-right: 0;
}

enter image description here

.containerクラスのパディング

で：

.container {
    padding-left:30px;
    padding-right:30px;
}

enter image description here

サブグリッドは.containerクラス内にラップしないでください。

19
Bass Jobsen

Bassの答えが正しいとは思わない。行の余白に触れるのはなぜですか？行の端にある列の列パディングをオフセットするための負のマージンがあります。これをいじると、ネストされた行が壊れます。

答えは簡単です。コンテナのパディングをガターサイズに等しくするだけです。

例：デフォルトのブートストラップの場合：

.container {
    padding-left:30px;
    padding-right:30px;
}

http://jsfiddle.net/3wBE3/61/

9
ElwoodP

デフォルトの動作（Gutterを使用）を維持し、次のようなタスクのクラスをCSSスタイルシートに追加できます。

.no-Gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

HTMLで使用する方法は次のとおりです。

<div class="row no-Gutter">
    <div class="col-md-4">
        ...
    </div>
    <div class="col-md-4">
        ...
    </div>
    <div class="col-md-4">
        ...
    </div>
</div>
8
Zod

この問題に直面して、CSSスタイルシートに以下を追加しました。

#mainContent .container {
    padding-left:16px;
    padding-right:16px;
}
  #mainContent .row {
    margin-left: -8px;
    margin-right: -8px;
}

  #mainContent .col-xs-1, #mainContent .col-sm-1, #mainContent .col-md-1, #mainContent .col-lg-1, #mainContent .col-xs-2, #mainContent .col-sm-2, #mainContent .col-md-2, #mainContent .col-lg-2, #mainContent .col-xs-3, #mainContent .col-sm-3, #mainContent .col-md-3, #mainContent .col-lg-3, #mainContent .col-xs-4, #mainContent .col-sm-4, #mainContent .col-md-4, #mainContent .col-lg-4, #mainContent .col-xs-5, #mainContent .col-sm-5, #mainContent .col-md-5, #mainContent .col-lg-5, #mainContent .col-xs-6, #mainContent .col-sm-6, #mainContent .col-md-6, #mainContent .col-lg-6, #mainContent .col-xs-7, #mainContent .col-sm-7, #mainContent .col-md-7, #mainContent .col-lg-7, #mainContent .col-xs-8, #mainContent .col-sm-8, #mainContent .col-md-8, #mainContent .col-lg-8, #mainContent .col-xs-9, #mainContent .col-sm-9, #mainContent .col-md-9, #mainContent .col-lg-9, #mainContent .col-xs-10, #mainContent .col-sm-10, #mainContent .col-md-10, #mainContent .col-lg-10, #mainContent .col-xs-11, #mainContent .col-sm-11, #mainContent .col-md-11, #mainContent .col-lg-11, #mainContent .col-xs-12, #mainContent .col-sm-12, #mainContent .col-md-12, #mainContent .col-lg-12 
{
    padding-left: 8px;
    padding-right: 8px;
}

これはデフォルトのbootstrap=スタイリングをオーバーライドし、左右とガターの幅を等しくします。

2
user1158039

これらのヘルパークラスをstylesheet.lessに追加します（ http://less2css.org/ を使用してCSSにコンパイルできます）

.row.Gutter-0 {
    margin-left: 0;
    margin-right: 0;
    [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}

.row.Gutter-10 {
    margin-left: -5px;
    margin-right: -5px;
    [class*="col-"] {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.row.Gutter-20 {
    margin-left: -10px;
    margin-right: -10px;
    [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

HTMLで使用する方法は次のとおりです。

<div class="row Gutter-0">
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
</div>

<div class="row Gutter-10">
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
</div>

<div class="row Gutter-20">
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
</div>
2
Mohammad Dayeh

私はこの問題に悩まされていましたが、私の解決策は、希望する実際のガターサイズをSCSSで指定できるミックスインを作成することでした...

ソリューション：1）

@mixin add-Gutter($size) {
    margin-right: -$size;
    margin-left: -$size;

    > [class*="col-"] {
        padding-right: $size;
        padding-left: $size;
    }
}



.that-special-row{
    @include add-Gutter(7px);
}

そしてそれを使用するには...

<div class="row that-special-row"></div>

実際の解決策は、githubで言及されている この問題 から生じたもので、同じ問題に対処していると思います。

解決策：2）

別の解決策は、単にカスタムCSSクラスを作成することです

.small-gutters {
    margin-right: -10px;
    margin-left: -10px;
    > [class*="col-"] {
      padding-right: 10px;
      padding-left: 10px;
    }
  }

お役に立てば幸いです！

2
etiennejcharles

ブートストラップ3が導入されましたrow-no-gutters v3.4.0で

https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters

溝なしの列を作成し、溝を入れたい部分のために、溝の内側に列を作成できます。

0
dyve

独自のプロジェクトでsassを使用する場合は、ブートストラップの_variables.scssファイルからsass変数をコピーして、次のように独自のプロジェクトsassファイルにデフォルトのbootstrap=ガターサイズを上書きできます。

// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-Gutter-width-base:     50px !default;
$grid-Gutter-widths: (
        xs: $grid-Gutter-width-base,
        sm: $grid-Gutter-width-base,
        md: $grid-Gutter-width-base,
        lg: $grid-Gutter-width-base,
        xl: $grid-Gutter-width-base
) !default;

これで、溝は30pxではなく50pxになります。ガターサイズを調整する最もクリーンな方法であることがわかりました。

0
user33560

@Bass Jobsenと@ElwoodPは、この質問に逆に答えようとしました。外側の余白に側溝と同じDOUBLEサイズを与えました。 OP（および私も）は、すべての場所でシングルサイズのガターを持つ方法を探していました。そのための正しいCSS調整を次に示します。

.row {
    margin-left: -7px;
    margin-right: -7px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding-left: 7px;
    padding-right: 7px;
}
.container {
    padding-left: 14px;
    padding-right: 14px;
}

これにより、14pxすべての場所での溝と外側マージン。

0
Michael Yaeger