Această postare va discuta ce sunt spațiile de jgheab și cum pot fi eliminate pentru un anumit div în Bootstrap.
Ce este Gutter Space în Bootstrap?
Jgheaburile sunt spațiile sau golurile dintre stâlpi produse prin căptușeală orizontală. Sunt folosite pentru a sprijini alinierea conținutului receptiv și spațiile din sistemul de grilă Bootstrap.
Mai jos imaginea dată arată un rând cu un chenar roșu în jurul lui. În cadrul rândului, există trei elemente div de dimensiuni egale cu coloane de grilă egale. Deși coloanele sunt egale, există încă spații de jgheab între ele:
Cum să eliminați spațiul de jgheab pentru un anumit div în Bootstrap?
În Bootstrap, clasa „ fără jgheaburi ” este utilizat pentru a elimina spațiile de jgheab ale oricărei div.
În acest scop:
- Adauga o ' „etichetați împreună cu clasa „ principal-div ”.
- Apoi, ajustați o secțiune de rând adăugând un alt „
„element cu clasa „ rând ”. Deoarece trebuie să eliminam spațiile din rând, specificați o clasă „ fără jgheaburi ” în cadrul acestuia.- Pentru a împărți rândul grilei în trei coloane egale, utilizați clasa „ col-4 ”.
- În cadrul containerului „
” al fiecărei coloane, ajustați elementele „” cu clasele „ coloana-1 ”, “ coloana-2 ', și ' coloana-3 ”, respectiv: < div clasă = 'main-div' >
< div clasă = 'rând fără jgheaburi' >
< div clasă = 'col-4' >
< div clasă = „coloana-1” >< / div >
< / div >
< div clasă = 'col-4' >
< div clasă = „coloana-2” >< / div >
< / div >
< div clasă = 'col-4' >
< div clasă = „coloana-3” >< / div >
< / div >
< / div >
< / div >CSS
În secțiunea CSS, clasele menționate în pagina HTML sunt stilate cu mai multe proprietăți de stil.
Clasa de stil „main-div”.
.principal-div {
lăţime : 600px;
marja: 50px automat;
}„ .principal-div ” este menționat pentru a accesa elementul div având clasa “ principal-div ”. Următoarele proprietăți sunt aplicate acestei clase:
- „ lăţime ” definește lățimea elementului.
- „ marginea ” stabilește distanța în jurul elementului.
Clasa de stil „rând”.
.rând {
frontieră : 1px roșu continuu;
}The Bootstrap” rând ” se adaugă cu “ frontieră ” proprietate. Aceasta va înfășura rândul grilei într-o lățime, stil și culoare specificate.
Cele trei clase” coloana-1 ”, “ coloana-2 ', și ' coloana-3 ” li se atribuie CSS “ culoare de fundal ' și ' înălţime ” proprietăți pentru a le face proeminente.
Stil clasa „coloana-1”.
.coloană- unu {
fundal- culoare : turcoaz;
înălţime : 200px;
}Stil clasa „coloana-2”.
.coloană- 2 {
fundal- culoare : violet;
înălţime : 200px;
}Stil clasa „coloana-3”.
.coloană- 3 {
fundal- culoare : galben verde;
înălţime : 200px;
}Se poate observa că „
„container cu clasa „ rând ” a fost ajustat cu succes, fără spațiu între ele:
V-am învățat cum să eliminați spațiul de jgheab pentru un anumit div în Bootstrap.
Concluzie
Pentru a elimina spațiile de jgheab pentru un anumit div, clasa „ fără jgheaburi ' poate fi folosit. În acest scop, adăugați „
” împreună cu elementul “ rând fără jgheaburi ” clasa. Această postare a oferit un ghid cuprinzător despre spațiile jgheab și cum pot fi eliminate pentru un anumit div în Bootstrap. - Apoi, ajustați o secțiune de rând adăugând un alt „