Bootstrap 3の列からパディングを削除する

342

問題：

Bootstrap 3でcol-md- *の左右のパディング/マージンを削除します。

HTMLコード：

<div class="col-md-12">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>

            <div class="widget-content" id="">
                <div id='jqxWidget'>
                    <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                    <div style="clear:both;" id="listBoxB"></div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>

            <div class="widget-content">
                <div id="map_canvas" style="height: 362px;"></div>
            </div>
        </div>
    </div>

</div>

望ましい出力：

現在、このコードは2つの列の左右にパディング/マージンを追加しています。側面のこの余分なスペースを削除するために何が欠けているのでしょうか？

通知：

「col-md-4」を削除すると、両方の列が100％に拡張されますが、互いに隣接させたいと思います。

css  twitter-bootstrap  html 
— ケックスクリーム
ソース
1
Bootstrap 4にはpl-0 pr-0ieを使用します<div class="col-7 pl-0 pr-0">
— Muhammad Shahzad

回答:

454

通常は.row、2つの列をラップするために使用し.col-md-12ます。これは、別の列を囲む列です。結局のところ、がもたらす.row余分なマージンとパディングはなくcol-md-12、列が導入するスペースがマイナスの左右のマージンで割り引かれます。

<div class="container">
    <div class="row">
        <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

        <div class="col-md-4 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Dimensions</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>

        <div class="col-md-8 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Results</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>
    </div>
</div>

本当にパディング/マージンを削除したい場合は、クラスを追加して、各子列のマージン/パディングを除外します。

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
— マッキーイー
ソース
コンテナクラスに.without-paddingを追加することも必要ですか？あなたが提供したCSSコードで.col-md-8 divに.nopaddingを追加するだけで十分だと思います。
— Charles Ingalls
59
通常、カスタムCSSで3つの追加クラスを作成します。つまり、.padding-0左と右のパディング（のみ）を0に設定します。.padding-smパディングを2pxに.padding-md設定し、パディングを5pxに設定します。通常のパディングは15px（カスタマイズされていない場合）なので、これらの追加のクラスで十分です。
— MichaelJTaylor
道による.rowそれの新しいラインを移動
— ozanmuyes
6
通常のパディングは変数でカスタマイズされます。less@ grid-gutter-width：30px;
— Vladislav Lezhnev 2014年
6
パディングを削除するか、クラスを作成するための事前定義されたブートストラップは唯一の解決策です
— Gaurav Aggarwal
186

Bootstrap 4に.no-guttersクラスが追加されました。

Bootstrap 3：私は常にこのスタイルをBootstrap LESS / SASSに追加します：

.row-no-padding {
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

次に、HTMLで次のように記述できます。

<div class="row row-no-padding">

子列のみを対象とする場合は、子セレクターを使用できます（John Wu氏）。

.row-no-padding > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

特定のデバイスサイズの場合にのみパディングを削除することもできます（SASSの例）。

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  .row-sm-no-padding {
    [class*="col-"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

小さなデバイスを上向きにサポートする場合は、メディアクエリの最大幅の部分を削除できます。

— Martinedwards
ソース
10
これはネスティング（これもSASSにあります）を除いてプレーンなCSSなので、同じように動作するはずです。
— martinedwards 2014
4
直接子セレクターを使用してパフォーマンスを向上させることをお勧めします。& >[class*="col-"]代わりに使用してください。
— John Wu
3
@JohnWuは、ネストされた行がスタイルを継承しないようにするため、少し問題が発生しました。ありがとう！
— Troy Carlson
2
たとえば、[class^="col-"], [class*=" col-"] {...}名前の付いたクラスを誤ってターゲットにしないように、実際に代わりに使用する必要がありますfoocol-。これは、最初にそのクラス名を持つ要素をターゲットにするか、文字列が別のクラス名の一部として見つかった場所をターゲットにすることなく、それをセカンダリクラスとしても持つ要素をターゲットにします。
— Brett
1
聖なる煙！私のiPhone 6は時々（しかし、一貫性のない）私のWebページに自動ズームするので、私はiOSビューポートのバグだと思ったものとの戦いに何時間も費やしました。colパディングを削除した後、自動ズームは適切に機能すると思います！ありがとう！
— ライアン
45

列のパディングを減らすだけではうまくいきません。ページの幅を広げて、ページの他の部分と不均一にするからです（navbarなど）。行の負のマージンも同様に減らす必要があります。@martinedwardsのLESSの例：

.row-no-padding {
  margin-left: 0;
  margin-right: 0;
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
— フェブ
ソース
これは、行がコンテナまたは別の列にない場合にのみ問題になります。負のマージンは、これらの要素からのパディングを相殺するだけです
— Fred Stark
私!importantは両方のマージンがこの仕事をするために必要でした
— フィリップ・ビケル
22

特にSASSミックスインの場合：

@mixin no-padding($side) {
    @if $side == 'all' {
        .no-padding {
            padding: 0 !important;
        }
    } @else {
        .no-padding-#{$side} {
            padding-#{$side}: 0 !important;
        }
    }
}

@include no-padding("left");
@include no-padding("right");
@include no-padding("top");
@include no-padding("bottom");
@include no-padding("all");

次に、HTMLでは、 

.no-padding-left
.no-padding-right
.no-padding-bottom
.no-padding-top
.no-padding - to remove padding from all sides

もちろん、必要な宣言だけを@includeすることができます。

— ヴィタリー・シリン
ソース
この状況でこのミックスインを使用しようとしています（そのおかげで）、パディングが機能していません。 .banners-home { @include make-row(); .banner-comprar,.banner-pq{ @include no-padding("all"); @include make-xs-column(6); @include make-sm-column(6); @include make-md-column(6); @include make-lg-column(6); } .banner-simulador{ @include no-padding("all"); @include make-xs-column(12); @include make-sm-column(12); @include make-md-column(12); @include make-lg-column(12); } }
— jpcmf80 2015年
何が悪いのかわかります。このソリューションを機能させるには、別のミックスインを作成する必要があります。ところで、SASSミックスインをありがとう:)
— jpcmf80
これ@mixin nopadding{ padding:0!important; }を自分で作成し、上記のコードに_mixin.scss 追加@include nopadding;します。:)
— jpcmf80 2015年
15

ブートストラップ3の組み込みクラスである「パディングなし」を追加するだけです

— バルガブ
ソース
列に追加するときに機能します。これは、ネストされた列を使用して複数のパディングを回避するときに使用する必要があります。
— NicolasBernier
4
また、no-gutterクラスを親に追加することもでき.rowます。
— ArtBIT 2016年
3
私はあなたがコードする必要があると思う@ArtBIT no-guttersあたりとしてv4-alpha.getbootstrap.com/layout/grid/#no-gutters。それは作り付けではありません。
— Caltor 2017
10

LESSソースからブートストラップをコンパイルする場合にのみ実行可能な別の解決策は、列のパディングを設定する変数を再定義することです。

variables.lessファイル内に変数が見つかります。これはと呼ばれ@grid-gutter-widthます。

ソースでは次のように説明されています。

//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;

これを0に設定してコンパイルしbootstrap.less、結果のを含めますbootstrap.css。完了です。私のようにすでにブートストラップソースを使用している場合は、追加のルールを定義する代わりに使用できます。

— リンク
ソース
6

Bootstrap 3、バージョン3.4.0以降、パディングを削除する公式な方法があります：クラスrow-no-guttersです。

ドキュメントの例：

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
— スミ
ソース
3

上記の解決策のどれも私にとって完璧に機能しませんでした。この回答に従って、私は自分に合ったものを作成することができました。ここでは、メディアクエリを使用して、これを小さな画面のみに制限しています。

@media (max-width: @screen-sm) {
    [class*="col-"] {
      padding-left: 0;
      padding-right: 0;
    }
    .row {
      margin-left: 0;
      margin-right: 0;
    }
    .container-fluid {
      margin: 0;
      padding: 0;
    }
}
— RLV段
ソース
3

ブートストラップ3.7.7以下を使用して、b / w列から間隔を削除します。

.no-gutterは、行DIVに追加できるカスタムクラスです。

.no-gutter > [class*='col-'] {
        padding-right:0;
        padding-left:0;
    }
— スーパーモデル
ソース
これは機能し、LESSまたはSASSを必要としませんでした。ただし、コンテナークラスを行に追加する必要があることに気付きましたが、この追加のスタイルを適用する必要がありますmargin:0 auto;。
— Volomike、
開発者は、これが完了したら、列内にDIVを作成し、独自のガターサイズを作成するために、それにDIVを適用する必要があることを理解する必要があります。
— Volomike
2 
<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>

<div class="col-md-4">
    <div class="widget row">
        <div class="widget-header">
            <h3>Dimensions</h3>
        </div>

        <div class="widget-content" id="">
            <div id='jqxWidget'>
                <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                <div style="clear:both;" id="listBoxB"></div>

            </div>
        </div>
    </div>
</div>

<div class="col-md-8">
    <div class="widget row">
        <div class="widget-header">
            <h3>Results</h3>
        </div>

        <div class="widget-content">
            <div id="map_canvas" style="height: 362px;"></div>
        </div>
    </div>
</div>

col-md-4内のdivに行のクラスを追加できます。行の-15pxマージンは、列からの余白のバランスをとります。ここで、Bootstrap 3のガターと行について説明します。

— 1Bladesforhire
ソース
2

ただ使う方が簡単だと思います 

margin:-30px;

ブートストラップによって設定された元の値を上書きします。

私はもう試した 

margin: 0px -30px 0px -30px;

そしてそれは私のために働いた。

— バシャー
ソース
1

列を.rowでラップし、そのdivに「no-gutter」というクラスを追加します

<div class="container">
  <div class="row no-gutter">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>
</div>

次に、以下の内容をCSSファイルに貼り付けます

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

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}
— チー
ソース
1

CSS参照でBootstrap Gutterを削除/カスタマイズ：http : //arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/

/* remove */
.gutter-0.row {
  margin-right: -0px;
  margin-left: -0px;
}
.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] {
  padding-right: 0px;
  padding-left: 0px;
}

/* customize */
.gutter-6.row {
  margin-right: -3px;
  margin-left: -3px;
}
.gutter-6 > [class^="col-"], .gutter-6 > [class^=" col-"] {
  padding-right: 3px;
  padding-left: 3px;
}
    
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row gutter-6">
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>
スニペットを展開

— haryx8
ソース
0

マージンを削除するための新しいクラスを作成し、余分なマージンを削除する要素に適用できます。

.margL0 { margin-left:0 !important }

！重要：デフォルトのマージンを削除するか、現在のマージン値を上書きするのに役立ちます

左側からマージンを削除したいdivに適用します

— ウディットバンサル
ソース
0 
<style>
.col-md-12{
 padding-left:0px !important;
padding-right:0px !important;
}
.col-md-8{
padding-left:0px !important;
padding-right:0px !important;
}
.col-md-4{
padding-left:0px !important;
padding-right:0px !important;
}
</style>
— スレーラクシュミ
ソース
答えを説明してください。
— PKirby 2015年
<head>タグの前または後にこれらのコードを提供して、そのページのこれらのクラスプロパティをオーバーライドできるようにします
— Sreelakshmi
0

ブートストラップを使用してLess Mixinsを作成し、列のマージンとパディングを管理できます。

http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/

使用法： 

xs-padding-lr-15px//left right both
xs-padding-l-15px 
xs-padding-r-15px

同様に、使用できるマージン/パディングゼロを設定するために、

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px
— モハンデレ
ソース
その時のリンク先ページにはおもしろい情報があるようです。これはSOの方法ではありません。あなたの答えに重要な情報を入れてください！
— jogo
または、人々は159の賛成票で承認された回答を使用でき、反対票はありませんでした。これは2年間ここにあります。または、10以上の賛成票を持ついくつかの他の回答の1つ。あなたはその競争に対してこのページの場所を獲得するためにもっと一生懸命努力しなければならないでしょう。
— トムZych
0

Vitaliy Silinの答えに基づいて構築します。パディングがまったく不要な場合だけでなく、標準サイズのパディングがある場合もカバーします。

sassmeister.comで、このコードからCSSへのライブ変換をご覧ください。 

@mixin padding($side, $size) {
    $padding-size : 0;
    @if $size == 'xs' { $padding-size : 5px; }
    @else if $size == 's' { $padding-size : 10px; }
    @else if $size == 'm' { $padding-size : 15px; }
    @else if $size == 'l' { $padding-size : 20px; }

    @if $side == 'all' {
        .padding--#{$size} {
            padding: $padding-size !important;
        }
    } @else {
        .padding-#{$side}--#{$size} {
            padding-#{$side}: $padding-size !important;
        }
    }
}

$sides-list: all top right bottom left;
$sizes-list: none xs s m l;
@each $current-side in $sides-list {
  @each $current-size in $sizes-list {
    @include padding($current-side,$current-size);
  }
}

これは次に出力します：

.padding--none {
  padding: 0 !important;
}

.padding--xs {
  padding: 5px !important;
}

.padding--s {
  padding: 10px !important;
}

.padding--m {
  padding: 15px !important;
}

.padding--l {
  padding: 20px !important;
}

.padding-top--none {
  padding-top: 0 !important;
}

.padding-top--xs {
  padding-top: 5px !important;
}

.padding-top--s {
  padding-top: 10px !important;
}

.padding-top--m {
  padding-top: 15px !important;
}

.padding-top--l {
  padding-top: 20px !important;
}

.padding-right--none {
  padding-right: 0 !important;
}

.padding-right--xs {
  padding-right: 5px !important;
}

.padding-right--s {
  padding-right: 10px !important;
}

.padding-right--m {
  padding-right: 15px !important;
}

.padding-right--l {
  padding-right: 20px !important;
}

.padding-bottom--none {
  padding-bottom: 0 !important;
}

.padding-bottom--xs {
  padding-bottom: 5px !important;
}

.padding-bottom--s {
  padding-bottom: 10px !important;
}

.padding-bottom--m {
  padding-bottom: 15px !important;
}

.padding-bottom--l {
  padding-bottom: 20px !important;
}

.padding-left--none {
  padding-left: 0 !important;
}

.padding-left--xs {
  padding-left: 5px !important;
}

.padding-left--s {
  padding-left: 10px !important;
}

.padding-left--m {
  padding-left: 15px !important;
}

.padding-left--l {
  padding-left: 20px !important;
}
— エイドリアン・ビー
ソース
0

場合によっては、列に必要なパディングが失われることがあります。彼らはお互いにくっついてしまいます。これを防ぐには、次のようにクラスを更新します。

<div class="col-md-3 NoPaddingForChildren">
        <div class="col-md-6">
                    <label>Id</label>
                    <input ng-model="ID" class="form-control">
        </div>
        <div class="col-md-6">
                    <label>Value</label>
                    <input ng-model="Val" class="form-control">
        </div>
</div>

および対応するクラス：

.NoPaddingForChildren > div:not(:first-child):not(:last-child) {
    padding-left: 0;
    padding-right: 0;
}

.NoPaddingForChildren > div:first-child {
    padding-left: 0;
}

.NoPaddingForChildren > div:last-child {    
    padding-right: 0;
}
— マヘシュ
ソース
0

SASSファイルを使用してブートストラップをダウンロードすると、列のマージンの設定がある構成ファイルを編集して保存できます。その方法で、SASSは列の新しい幅を計算します

— TheCrazyProfessor
ソース
0

Bootstrap Gridシステムをカスタマイズして、カスタムレスポンシブグリッドを定義できます。

次のガター幅のデフォルト値をから@grid-gutter-width = 30pxに変更します@grid-gutter-width = 0px

（ガター幅は列間のパディングです。左右に半分に分割されます。）

— ラフィクル・イスラム
ソース
0

私はまだすべての画面サイズのすべてのパディングを制御することを好むので、このCSSはあなたたちに役立つかもしれません:)

.nopadding-lg {
    padding-left: 0!important;
    padding-right: 0!important;
}
.nopadding-left-lg {padding-left: 0!important;}
.nopadding-right-lg {padding-right: 0!important;}

@media (max-width: 576px) {
    .nopadding-xs {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-xs {padding-left: 0!important;}
    .nopadding-right-xs {padding-right: 0!important;}
}

@media (max-width: 768px) {
    .nopadding-sm {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-sm {padding-left: 0!important;}
    .nopadding-right-sm {padding-right: 0!important;}
}
@media (max-width: 992px) {
    .nopadding-md {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-md {padding-left: 0!important;}
    .nopadding-right-md {padding-right: 0!important;}
}
— エリック・ローベル
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.