rimozione padding sinistro/destro su col-md-6 Bootstrap

Question

Ho un sito che utilizza Bootstrap ma voglio sovrascrivere il riempimento sinistro e destro solo sulle colonne col-md-6 (impostarli su 0px). Non so come farlo, il mio attuale set up è ...

css

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

e applicandolo alle

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

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

ma che col-md-6 volte viene sostituito (Wordpress loop) con un div col-md-12 e non voglio .fix-gutters da applicare se questo è il caso.

NOTA: ho bisogno che l'override si verifichi allo stesso livello del comando col-md-6. esempio

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

Answer 1

Questo li ha per obiettivo per voi: (servirà solo a rendere la modifica elementi all'interno del main div)

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

Answer 2

Se si desidera aggiungere un'altra classe, è sufficiente aggiungere un classe chiamata no-padding.

Poi, nel CSS, aggiungere:

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

O non è questo che vuoi dire?

Answer 3

si può semplicemente aggiungere una classe nuova di ciò che si sta giá ma specifica per col-md-6

Vedi esempio Snippet a Pagina intera.

.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>