2016-10-26 13 views
7

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?Jak usunąć spację między kolumnami ładowania początkowego?

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> 

Odpowiedz

17

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

Dzięki za pracę dla mnie! – hussain

+3

ale kolumna przekroczy rząd div –

10

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.

+0

Zapomniałem o braku rynny - dzięki za to! –

+0

z jakiegoś powodu nie widzę tego działającego, używając bootstrap 3.1.1 – hussain

+0

@hussain Przepraszamy, właśnie zaktualizowałem moją odpowiedź - naprawdę myślałem, że ta klasa już istnieje, ale okazało się, że musisz sam ją stworzyć ... moja wina! – andreas

1

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; 
} 
+0

Mimo to kolumny znikną z rzędu. Dodaj dodatkowe css: .nopadding {margin-left: 0px; margin-right: 0px;}, aby zachować kolumny wewnątrz wiersza. – sudip

1

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

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.

-1
<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> 
+0

Chociaż ten fragment kodu może rozwiązać pytanie, [w tym wyjaśnienie] (http://meta.stackexchange.com/questions/114762/explaining-entirely-code-ans -answers) naprawdę pomaga poprawić jakość twojego postu. Pamiętaj, że odpowiadasz na pytanie przeznaczone dla czytelników w przyszłości, a te osoby mogą nie znać powodów sugestii dotyczących kodu. – andreas

0

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

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

1

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> 
Powiązane problemy