twitter-bootstrap - ブートストラップ 3 ガター サイズ

Question

ブートストラップを使い始めたばかりで、目標を達成する方法がわかりません。

この画像のように、ガターをすべて均等にしたいと思います。

デフォルトでは、これらは次のように表示されます。列間の垂直ガター (青色でマーク) は、水平ガターと外側ガターの 2 倍です。

これを解決するための最良の方法についての助けは、おそらく感謝されます。

Answer 1

試す：

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

すべての列には、両側に 15 ピクセルのパディングがあります。これにより、30 px の間のガターが作成されます。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、サブ グリッドは壊れません。

デフォルト：

.rowクラスのマージン

と：

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

.containerクラスのパディング

と：

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

.containerサブ グリッドをクラス内でラップしないことに注意してください。

Answer 2

デフォルトの動作 (ガター付き) を維持し、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>

Answer 3

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

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

たとえば、デフォルトのブートストラップの場合:

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

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

Answer 4

これらのヘルパー クラスを 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>

Answer 5

I've been stuck with this problem, my solution was creating a mixin which allows me to specify in SCSS, the actual gutter size I want ...

Solution: 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);
}

And to use it...

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

The actual solution came about from this issue mentionned on github, which I believe addresses the same problem.

Solution: 2)

Another solution, would be simply to create your custom CSS class

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

Hope that helps!

Answer 6

row-no-guttersv3.4.0 で導入された Bootstrap 3

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

ガターなしの行を作成し、ガターが必要な部分のためにその中にガターのある行を作成できます。