col-md-6の左/右のパディングを削除するブートストラップ

Question

私はブートストラップを利用するサイトを持っていますが、カラムcol-md-6（0pxに設定）だけで左と右のパディングを上書きします。私の現在のセットアップがあり、それを行う方法がわからない...

CSS

.fix-gutters > [class^="col-"], 
.fix-gutters > [class*=" col-"] { 
    padding-right: 0px; 
    padding-left: 0px; 
} 

と

<div id="main" class="row fix-gutters"> 

    .... <div class="col-md-6"> ... etc. 

それCOL-MD-6に適用するには、時々置き換えられます（Wordpressのloop）をcol-md-12 divで置き換えてください。もしそうなら、.fix-guttersを適用したくありません。

注：col-md-6コマンドと同じレベルでオーバーライドする必要があります。例

<div class="col-md-6 overide-class"> 

Answer 1

これはあなたのためにそれらを対象とします：（のみmainのdiv内の要素への変更を行います）

#main > .col-md-6{padding-right: 0; padding-left: 0;}

Answer 2

あなたが別のクラスを追加したい場合は、単に追加クラスno-paddingと呼ばれます。

次に、あなたのCSSに、追加します。

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

それとも、これはあなたが何を意味するかではありませんの？

Answer 3

あなたは、単にあなたがたがフルページで例スニペットを参照してくださいcol-md-6

のためにそれを指定出回っているものに新しいクラスを追加することができます。

.fix-gutters > [class*="col-"], 
 
.fix-gutters-six > [class*="col-md-6"] { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container text-center"> 
 
    <h2> 
 
    Removed Padding only from Medium 6 Columns 
 
    </h2> 
 
    <div class="row fix-gutters-six"> 
 
    <div class="col-md-6"> 
 
     <div class="alert alert-info"> 
 
     Removed Padding on 6 Columns 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <div class="alert alert-info"> 
 
     Removed Padding on 6 Columns 
 
     </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
     <div class="alert alert-danger"> 
 
     Default 12 Columns 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <h2> 
 
    Default Columns 
 
    </h2> 
 
    <div class="col-md-6"> 
 
     <div class="alert alert-info"> 
 
     Default 6 Columns 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <div class="alert alert-info"> 
 
     Default 6 Columns 
 
     </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
     <div class="alert alert-danger"> 
 
     Default 12 Columns 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row fix-gutters"> 
 
    <h2> 
 
    Removed Padding from All Columns 
 
    </h2> 
 
    <div class="col-md-6"> 
 
     <div class="alert alert-info"> 
 
     Removed Padding from all Columns 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <div class="alert alert-info"> 
 
     Removed Padding from all Columns 
 
     </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
     <div class="alert alert-danger"> 
 
     Removed Padding from all Columns 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>