usuwanie lewej/prawej wyściółki na col-md-6 Bootstrap

Question

Mam witrynę wykorzystującą Bootstrap, ale chcę zastąpić lewe i prawe wypełnienie tylko kolumnami col-md-6 (ustaw je na 0px). Nie wiem, jak to zrobić, mój obecny zestaw up jest ...

css

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

i stosując ją do

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

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

ale kol-MD-6 czasami zostaje zastąpiona (Wordpress Pętla) z col-md-12 div i nie chcę .fix-gutters do zastosowania, jeśli tak jest.

UWAGA: potrzebuję nadpisania, aby nastąpiło na tym samym poziomie co polecenie col-md-6. Przykładem

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

Answer 1

Będzie je kierować do was: (będzie jedynie zmian do elementów wewnątrz main div)

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

Answer 2

Jeśli chcesz dodać kolejną klasę, po prostu dodaj klasa o nazwie no-padding.

Następnie w CSS, dodać:

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

A może to nie to, co masz na myśli?

Answer 3

Można po prostu dodać nową klasę, do czego są allready ale określenie to dla col-md-6

patrz przykład urywek w FullPage.

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