Önyükleme sütunları arasındaki boşluk nasıl kaldırılır?

Question

Önyükleme kılavuzundaki birden çok sütun arasındaki boşluğu kaldırmak istiyorum. Bu görevi ya da saf CSS ile daha iyi bir çözümü elde etmek için Bootstraps CSS'nin üzerine nasıl yazabiliriz?

main.html

<div class="row"> 
    <div class="col-md-2"> 
    // stuff here for this column 
    </div> 
    <div class="col-md-10"> 
    // stuff here for columns 
    </div> 
</div> 

Answer 1

Eğer bir oluşturabilir alanlarda bu html

.padding-0{ 
    padding-right:0; 
    padding-left:0; 
} 

bu sınıf

<div class="row"> 
    <div class="col-md-2 padding-0"> 
     //stuff here for this column 
    </div> 
    <div class="col-md-10 padding-0"> 
     //stuff here for columns 
    </div> 
</div> 

Answer 2

yazma kullanmak kaldırmak gerektiğinde bir sınıf eklemek row ve rem için no-gutter sınıfı ve rem this post önerilen gibi boot ayarlı ekleyen marjı/dolgu ove: Ben gri bir arka plan ve gösteri amaçlı bir sınır kurdum

.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; 
 
} 
 
.row > div { 
 
    background: lightgrey; 
 
    border: 1px solid; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row no-gutter"> 
 
    <div class="col-md-2"> 
 
    1 
 
    </div> 
 
    <div class="col-md-10"> 
 
    2 
 
    </div> 
 
</div>

. Sonuçları tam ekran olarak izleyin, sütunlar arasında artık boşluk kalmaz. Bootstrap'te önceden tanımlanmış marj ve dolgu hakkında daha fazla bilgi found here olabilir.

Ben soyundan joker seçici ile kolon çocukları satıra bir sınıf ekleyebilir ve hedef alacağını

Answer 3

:

HTML:

<div class="row nopadding"> 
    <div class="col-md-2"> 
     //stuff here for this column 
    </div> 
    <div class="col-md-10"> 
     //stuff here for columns 
    </div> 
</div> 

CSS:

.nopadding > div[class^="col-"] { 
    padding-right: 0; 
    padding-left: 0; 
} 

Answer 4

ise LESS kullanıyorsanız snippet'i kullanabilir ve sıraya uygulayabilirsiniz.

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

CSS öylesine gibi

.no-gutter > [class*="col-"]{ 
} 

normalse: onlar birlikte oturmak gerektiğini çıkarırsanız sütunlar üzerinde

<div class="row no-gutter"> 
    <div class="col-md-2"> 
    //stuff here for this column 
    </div> 
    <div class="col-md-10"> 
    //stuff here for columns 
    </div> 
</div> 

Answer 5

, iki tarafında bir 15px dolgu var.

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { 
    padding-right: 0px; 
    padding-left: 0px; 
} 

Bu snippet, grid-framework.less dosyasında bulunan değiştirilmiş koddan kaynaklanmaktadır.

Answer 6

<div class="row"> 
    <div class="col-md-2" style="padding:0"> 
     //stuff here for this column 
    </div> 
    <div class="col-md-10" style="padding:0"> 
     //stuff here for columns 
    </div> 
</div> 

Answer 7

Anshuman'ın çözümü aslında işe yarıyor! Dolguyu, stillerinde sıfıra ayarladığınızda bootstrap sütun boşluklarından kurtulur, yani: 0;

<div class = "row"> 
    <div class = "col-sm-3" style= "padding:0;"> 
    //html code here.. 
    </div> 
    <div class = "col-sm-3" style= "padding:0;"> 
    //html code here.. 
    </div> 
</div> 

Answer 8

Satıra basit bir şekilde .no-gutter ekleyin.el

eklemek zorunda kalmamak Bootstrap 4'te

https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works

Answer 9

Eğer sınıf mx-* ve px-*

<div class="row mx-0"> 
    <div class="col-md-6 px-0"> 
     <p>Your content</p> 
    </div> 
    <div class="col-md-6 px-0"> 
     <p>Your content</p> 
    </div> 
</div> 

mx-* ve px-* varsayılan önyükleme tarzındadır sınıflar ekleyebilir

Answer 10

Bootstrap 4'da, no-gutters sınıfı dahildir. Fazladan bir CSS'ye gerek yoktur ...

<div class="row no-gutters"> 
    <div class="col-md-2"> 
    // stuff here for this column 
    </div> 
    <div class="col-md-10"> 
    // stuff here for columns 
    </div> 
</div>