xóa trái/phải đệm trên col-md-6 Bootstrap

Question

Tôi có một trang sử dụng Bootstrap nhưng tôi muốn ghi đè phần đệm trái và phải trên cột col-md-6 (đặt chúng thành 0px). Bạn không chắc chắn làm thế nào để làm điều đó, thiết lập hiện tại của tôi lên là ...

css

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

và áp dụng nó để

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

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

nhưng điều đó col-md-6 đôi khi được thay thế (Wordpress vòng lặp) với một div-md-12 div và tôi không muốn .fix-máng xối để áp dụng nếu đó là trường hợp.

LƯU Ý: tôi cần ghi đè để xảy ra ở cùng cấp với lệnh col-md-6. Ví dụ

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

Answer 1

này sẽ nhắm mục tiêu chúng cho bạn: (sẽ chỉ làm cho sự thay đổi các yếu tố bên trong main div)

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

Answer 2

Nếu bạn muốn thêm một lớp khác, chỉ cần thêm một lớp được gọi là no-padding.

Sau đó, trong CSS của bạn, thêm:

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

Hoặc là đây không phải những gì bạn nghĩa là gì?

Answer 3

Bạn chỉ có thể thêm một lớp mới để những gì bạn đang allready nhưng xác định nó cho col-md-6

Xem ví dụ một số câu liên tại Trang đầy đủ.

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