Jak usunąć spację między kolumnami ładowania początkowego?

Question

Chcę usunąć spację między wieloma kolumnami w siatce startowej. W jaki sposób możemy nadpisać kod CSS Bootstraps, aby osiągnąć to zadanie lub jakiekolwiek inne lepsze rozwiązanie z czystym CSS?

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

dodać klasę, gdy trzeba usunąć używać spacji to

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

w html napisać tej klasy

<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

Można utworzyć klasa no-gutter dla Twojego row i rem ove margines/dopełnienie że Dodane przez bootstrap, jak sugerowano w this post:

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

mam ustawić szare tło i obramowanie dla celów demonstracyjnych. Obejrzyj wynik na pełnym ekranie, aby zobaczyć, że nie ma już miejsca między kolumnami. Więcej informacji o predefiniowanym marginesie i dopełnieniu w Bootstrapie może być found here.

Answer 3

chciałbym dodać klasę do wiersza i kierować dzieci Kolumna z potomkiem selektora wieloznacznym:

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

Jeśli używasz MNIEJ możesz użyć fragmentu kodu i zastosować go do wiersza.

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

Jeśli normalny CSS

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

tak:

<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

na kolumnach jest dopełnienie 15px po obu stronach, jeśli usuniesz że powinni usiąść razem.

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

Ten fragment pochodzi ze zmodyfikowanego kodu znalezionego w grid-framework.less.

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

Rozwiązanie Anshuman działa! Usuwa przestrzenie kolumn początkowych po ustawieniu wypełnienia na zero w stylach, tj. Padding: 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

Proste dodanie .no-rynny w rzędzie.

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

Answer 9

W Bootstrap 4 Można dodać klasę mx-* i 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> 

klasach mx-* i px-* zalega stylu bootstrap, więc nie trzeba go dodać ręcznie

Answer 10

W Bootstrap 4, klasa no-gutters jest dołączona. Nie jest potrzebny żaden dodatkowy kod CSS ...

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